Changes in CSS Files Are Not Reflected After Deployment

CSS changes are not getting reflected. Why?

I forgot to close a { in the CSS file.
That's why all the code didn't show up on the page.

CSS changes are not reflected even after changing version, hard refresh and clearing cache

is it a PWA (progressive web app)... ? in which case the data is served by service worker and not freshly fetched.

Go to

  • Chrome developer tools (press F12)...
  • Click on Application tab on
  • the left navigation, click on "Service workers" and 'unregister"
    service workers...
  • going on the next option in the left navigation, click on "Clear storage"...
  • click on the "Clear site data" button on the right zone restart Chrome and check with Ctrl+shift+R

if you're using a CDN, you may have to purge the cache for this particular CSS file from there as well.

css changes doesnt reflect on my project on localhost

Sometimes web browser may keep old version in cache and you may need turn off cache in web browser, or clear it, or try Ctrl+F5 to reload without using cache.

Or you can add random argument with ? to url - ie, /static/main.css?2020.08.11.08:45 and web browser will treat it as new url so it will read it from server.

In DevTool in Firefox/Chrome in tab Network you can check if it has no problem to load this file. It should show also if it was readed from cache.

CSS File Not Updating on Deploy (Google AppEngine)

I've seen this before on App Engine, even when using cache-busting query parameters like /stylesheets/default.css?{{ App.Version }}.

Here's my (unconfirmed) theory:

  1. You push a new version by deploying or changing a new version to default.
  2. While this update is being propagated to all GAE instances running your app...
  3. ...someone hits your site.
  4. The request for static resource default.css{{ App.Version }} is sent to Google's CDN, which doesn't yet have it.
  5. Google's CDN asks GAE for the resource before propagation from step #2 is done for all instances.
  6. If you're unlucky, GAE serves up the resource from an instance running the old version...
  7. ...which now gets cached in Google's CDN as the authoritative "new" version.

When this (if this is what happens) happens, I can confirm that no amount of cache-busting browser work will help. The Google CDN servers are holding the wrong version.

To fix: The only way I've found to fix this is to deploy another version. You don't run the risk of this happening again (if you haven't made any CSS changes since the race condition), because even if the race condition occurs, presumably your first update is done by the time you deploy your second one, so all instances will be serving the correct version no matter what.

CSS file not updating on Azure Deploy/Publish

"We are using Cloudflare which has a default set up to cache all CSS and JS files. It purges the cache every 4 hours which resulted in the arbitrary updates. So, even though I was adding a new query string to the end of the css file, Cloudflare still cached the old one"

Just a quick note that you should go to CloudFlare Development Mode when making changes to the static content files on your site. You can get to Development Mode to bypass the cache by going to: settings->Development Mode. You also have the option of purging your cache as an additional option, which we would only recommend if you really want to purge everything.

Firebase not rendering CSS Changes

First I tried changing the .body background color and it didn't work, so the solution was to add a new file 'mobile.css', link to it in index.html, and then redeploy the app.

Edit: After more changes, I've noticed that CSS files can only be deployed once.

@media screen and (max-width: 600px){
.computer-calendar{
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}

@media screen and (min-width: 600px){
.mobile-calendar{
visibility: visible;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}


Related Topics



Leave a reply



Submit