硬重载加载新的 css 但 f5 加载旧版本（即使在硬重载之后）

Question

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

Answer 1

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).

Answer 2

Eventually fixed this with adding hashes in the build files with webpack. So the filename wouldbe eg: main.2738547.css