Will @import css files still be cached if parent css file use querystring

caching, css

Solution

I expect each file to be treated independently. Why would it make a difference whether `css-fileA.css` was loaded directly or via `@import`? It's still the same URL and the cache should be used the same way.

Problem

I am about to do upgrades to webpages and css-files in our production environment. I would like to prevent css caching in the web browser, since this would otherwise disrupt the design if the new html is used together with the old css. I have made changes to three css-files in total: - Main css-file (referenced in the head section of the page with tag) - css-file A (referenced inside the main css-file using @import "css-fileA.css" syntax) - css-file B (referenced inside the main css-file using @import "css-fileB.css" syntax) To prevent browser caching I have added a querystring to my main css-file like: ...link href="main.css?rev=20121024"... I now wonder if the use of a querystring on main.css helps prevent caching of the css-files A and B that are referenced inside main.css with @import statements? Or do I need to also apply querystrings for them like @import "css-fileA.css?rev=20121024" ? Any help is greatly appreciated.

Original source