Why does my CSS not work with a different file name?

Question

I have been using a central CSS file to build my site and have added to and modified it over time. I use cloudflare which caches CSS files every few hours, so to avoid this I change the number on the end of the file name each time and update it in my header template. This worked fine for months on two different servers.

But just recently it has decided not to allow this. If I change the CSS's file name and reference link, the CSS will not load. If I set it back to what it was before (site_main61.css) then it works just fine. I've even tried using different characters than increment numbers at the end and still end up with the same result.

This started happening out of the blue; no changes had been made to the server. Could this be a problem with Cloudflare? Something else?

I can provide more details if needed, but I can't think of anything that would be relevant right now.

The problem is not related to forgetting to update the link in html. I've tested this countless times to be sure.

Answer 1

You can add a query string the to end of the file name. It will be cached as a separate file, but it will be the same filename. It's basically a forced recache for the file. Just go to the link in the HTML and add something like this:

<link href="path/to/file/site_main61.css?version=1" ... />

This will work with most caching systems and you no longer have to change the file name.