I'm currently running Compass and Bootstrap 3 through a Vagrant VM Box.
I've managed to successfully setup the project using both the Compass and Bootstrap Gem's.
I've now started writing my styles. Upon save I can see which files have been modified and if a the CSS has been re-compiled through SuperPuTTY, when using compass watch --poll. However, when either compiling via compass watch or through compass compile, I only occasionally see the changes through my browser.
I don't believe this to be a browser caching issue, as I've turned it off via dev tools, I've also tried clearing the cache, as well as directly opening up the newly compiled CSS and adding a ?1234 cache buster to the end of the URL. I'm also getting no errors upon compile (these are also normally displayed within SuperPuTTY).
I have a suspicion the problem may lay in the bootstrap plugin as this require 'bootstrap-sass' is loaded in the config.rb file, I'm currently investigating this.
Is anyone aware of any fixes for this, or aware of any issues/bugs with Compass compiling the Bootstrap SCSS code?
/------ UPDATE ------/
After further investigation this seems to be a caching issue. The file seems to be correct on the server after compiling, but when it arrives at the browser it seems to retain the old version. The browser cache is disabled, this is where my confusion now lays, as it should request a new file upon refresh.
We seemed to have fixed the problem by adding a no-cache rule for our header, and also disabling sendfile in the Apache vhosts file. This combination seems to have resolved the issue
Related
I have wagtail project, in this project I compile scss with webpack to the static folder in my project. When i have devtools open (and i checked the no cache checkbox) and then reload the page, the css is loaded. When i hard reload (clear cache etc) the new updated css is applied. If after this i press f5 again the previous older version is loaded.
How and why is this happening? This is the first time i've encountered this problem.
maybe it doesn't override the cache with the new css?
I am running chrome version: 98.0.4758.109
The browser is loading from the cache. I had the same problem and the cleanest way that I found to solve it was adding the "version" to the files. For example:
<link rel="stylesheet" href="styles.css?v=1">
Obviously, when you want to upload it again, increase the number (v=2).
Eventually fixed this with adding hashes in the build files with webpack. So the filename wouldbe eg: main.2738547.css
There is an issue with caching on my website. I used standard in-build cache and css&js compression previously, but now I had to turn it off. Turns out, all js&css code still minified. What's more - it affects sub-domain folders (my host is bluehost) so all sub-domain are also have same problem with scripts.
It's really weird issue. I tried to clear all cache_ tables from Drupal database, as well as everything related to cache from /sites/ folder. Still no result.
Any help will be appreciated.
Perhaps you have used advagg or minify module for that. If so - you need disable them in order to get rid of minification.
I would also recommend to inspect the current css files in browser and check what is the path to it. Doing that you would get better understanding what is going on here.
After disabling minification options on System/Development/Performance page in the actual html source on a page it should change from
into a list of
#import url("http://domain.name/sites/all/modules/admin_menu/admin_menu.css?nlpz6z");
I have a problem with a project in Laravel, the problem is that when you edit CSS code or add images and reload the page, changes do not apply.
eg I had an image called 1.jpg which was then deleted, replaced with 2.jpg. I edited the code calling the image 2.jpg, but even after reloading the page, 2.jpg is not displayed.
It is not browser cache - I've tried clearing it, but the issue remains. This also happens to me when I edit CSS - the changes are not applied. Any ideas? I've used Sublime text 2 and 3 with windows 8.1.
I've tried php artisan cache: clear, deleting the cache of the project, and no luck. I'm going crazy, can anyone suggest what to do?
If you are adding the css in the resources/sass/app.scss then you need to run after it npm run dev , this will compile your css.
I suggest adding the css internally in the file in the head tags or even inline css. But everytime you make changes to your resources/sass/app.scss you need to run npm run dev
I'm having a problem using Vaadin (in Eclipse) and its associated styling engine Valo, and the TouchKit package. I mention all of these because I'm not sure which, if any, is causing the problem. The name of my custom theme (which imports Valo) is simply "touchkit".
I have the project running on a Tomcat server on localhost and accessible in my browser. I wanted to tweak some of the CSS so I edited the appropriate file WebContent/VAADIN/themes/touchkit/touchkit.scss. After editing this file, I recompile the theme and see the appropriate changes in the generated file styles.css. Then I go to load up the application in my browser, and things get weird.
I can load the page and, using Chrome's developer tools, see that the page requests styles.css for download, as expected. It gets a 200 OK response from the server, but when I view styles.css, it contains just a single \n. This is also true in Safari. Even using cURL to download styles.css yields the same result. In the Eclipse editor, and when I inspect it in the terminal, styles.css is ~12,000 lines long. Why can't my browser or cURL get that data?
I can view similar project demos on Vaadin's own site and the stylesheet (which should be almost identical to mine) is loaded correctly. Also, other Vaadin projects on my localhost server have their stylesheets loaded correctly (though they do not use Valo). Compiling the theme in Eclipse yields no errors. Because the issue presents itself across a variety of graphical and non-graphical clients, I'm starting to think the issue is with Tomcat. But I can get to the directory from which Tomcat serves files and styles.css is correct in that folder too. There's no apparent reason that Tomcat would be serving a blank file.
You may have guessed from the description, but I'm working on a Mac. Any help is appreciated!
PS Mods - I also asked this question over at Superuser since it wasn't 100% a programming question. However, I'm new at Superuser and couldn't create tags for Vaadin or Valo, so I'm asking here where there might be a better chance of getting an answer.
Hard to say, since your are doing everything fine. My best bet would be the tomcat implementation you are using, maybe there's something weird there. Try upgrading to latest if it's not or to a previous version.
FYI I'm using Tomcat 7.0.55.
PS: your attempts are in run/debug from eclipse or have you made a .war form the project and deployed it with the Tomcat-Manager?
Regards
add below to your gwt.xml, and touchkit is not valo aware see https://vaadin.com/forum/#!/thread/8264224/8264223
<set-configuration-property
name='touchkit.manifestlinker.additionalCacheRoot'
value='src/main/webapp/VAADIN/themes/MyTheme:../../../VAADIN/themes/MyTheme' />
I am trying to update the font in a rails app - specifically the text in a brand class in the top navbar. I was successful in changing the font using google web fonts already, but now when I try to update the font again, it seems to be "stuck" on the last font I used. I precompiled assets before deploying to heroku, which is what I think may be causing the problem. Now the changes are not updating locally or in production.
I have done a few things to troubleshoot but none seem to be working:
Restarted the rails server
Emptied the cache folder in the tmp folder
Deleted public assets
Tried precompiling assets again - the font change does not work locally or on heroku
Tried targeting a more specific css selector (.navbar .brand versus .brand - it worked earlier for .brand so don't think that is the issue)
Cleared browsing history
Any ideas on what may be causing this?
Are you using turbolinks? If so, read this
Asset change detection
You can track certain assets, like application.js and application.css,
that you want to ensure are always of the latest version inside a
Turbolinks session. This is done by marking those asset links with
data-turbolinks-track, like so:
<link href="/assets/application-9bd64a86adb3cd9ab3b16e9dca67a33a.css"
rel="stylesheet" type="text/css" data-turbolinks-track>
If those assets change URLs (embed an md5 stamp to ensure this), the
page will do a full reload instead of going through Turbolinks. This
ensures that all Turbolinks sessions will always be running off your
latest JavaScript and CSS.
When this happens, you'll technically be requesting the same page
twice. Once through Turbolinks to detect that the assets changed, and
then again when we do a full redirect to that page.
Stupid mistake - had a navbar class styled in my css with font-style: monospace. After clearing that, everything worked - hopefully the troubleshooting steps help others!
View your page source and search for the font src. If you can't find it skip to 3.
Test the font and display code outside of the rails apps to make sure it is the asset pipeline.
If the src and display code work, provide your application.css and application.js to check your manifests.
What config files/code have you changed since your last assets:precompile that is not working properly.
My similar issue: Bootstrap, jQuery, and the Rails asset pipeline