I have a sinatra app using the rack-livereload and guard-livereload gems.
guard 'livereload' do
watch(%r{views/.+\.(erb|haml|slim)$})
watch(%r{.+\.(css|js)$})
end
When I make changes to my erb files, the browser reloads. It works as expected.
I'm using the sass gem for my css.
When I make changes to my .scss file, the css is not updating. The changes are not visible in the browser until I refresh the page. The sass is working - but is not being picked up by active reload.
Any idea how I set this up?
It looks like it's not reloading because the regex in the watch statement is only looking for files that end with .css or .js. If you want to make sure your .scss files get included, just change the watch statement to this:
watch(%r{.+\.(css|scss|js)$})
Another stylesheet that was missing from the page (404) stopped livereload from working for my case, it wasn't the stylesheet in concern but it prevent livereload from detecting the change in the one that I was making.
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
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 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
I'm having the hardest time trying to figure out this bug. All my widgets in JQuery Mobile render incorrectly on my development server, but when I push changes to heroku everything is fine. I tried deleting my tmp folder in rails but it still renders strangely.
Here are screen shots of my development server and the heroku one:
I think it has something to do with the asset pipeline, but I have no idea what might be causing it.
Make sure you delete your public/assets folder. Compiled css and js will overshadow your changes
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