Ensuring new CSS loads

Hi everyone!

How do you ensure new CSS is loaded on a live site? I always seem to have a problem with cache. The minified file has the same name and no version number. Is this something that has a simple solution?

Thank you in advance and great work on the starter theme

1 Like

Are you using any caching plugins, such as w3 total cache or wp super cache?

Yes I am, that’s a sure but inneffective way to bust the CSS cache

@Gorka_Molero Assuming you are using sage, note that the gulp --production command compiles the styles you’ve listed in assets/manifest.json, saving them to the dist/styles directory, each with a version number to bust the cache (courtesy of asset-builder, gulp-rev, etc.). That revving is one of the basic features of sage, maybe less emphasized in the docs because of all the more advanced features.

But this isn’t done on gulp watch, right? So gulp --production is the command before a version upload?

I’m using this but the call for the main.css file does not update with the revved version

No it doesn’t happen with gulp watch, and doesn’t need to, as Browsersync automatically reloads the page or injects the new CSS for you.

How to ensure the proper css file is called? The revved version is on the dist dir, but the page doesn’t update the call

Ok… well you probably shouldn’t be running gulp or gulp --production alongside an already running gulp watch, since gulp watch will already handle any files that are updated. Run gulp then gulp watch and go to work. If you run gulp --production for some reason, like deploying, then either run gulp again or stop and start gulp watch

If your version of Sage doesn’t already have this update, then you should probably add it in as well: https://github.com/roots/sage/commit/999adc6466c1adf0dbea820827fafaac88f02ba7