Flask does not load CSS file..?

Question

So the problem I'm having is that my web app only sometimes loads the css file and it uses the same css file data that was loaded even if I make edits to the css file and even when I delete the file. I have no clue what's going on. I have noticed that when it does load the css correctly the following message is displayed:

127.0.0.1 - - [08/Jun/2015 14:46:19] "GET /static/style.css HTTP/1.1" 200

My style.css file is under a folder named static and in my html file I have

<link type='text/css' href='{{ url_for('static', filename='style.css') }}' rel='stylesheet'>

Flask adds cache headers; your browser will not just load the file again while the cache is still fresh. — Martijn Pieters, Jun 08 '15 at 19:26
@MartijnPieters I'm extremely new to web dev could you explain briefly cache headers and how I fix the problem. — Jaquacky, Jun 08 '15 at 19:31
You could use a cache buster; add a unique value after the `?` to your URLs; each time you change the file change that value too. See http://flask.pocoo.org/snippets/40/ — Martijn Pieters, Jun 08 '15 at 19:32
Also see [Flask static file Cache-Control](http://stackoverflow.com/q/11356188) — Martijn Pieters, Jun 08 '15 at 19:32

Martijn Pieters · Accepted Answer · 2018-03-19T00:28:57.440

Flask sets cache control headers on static resources, and your browser will cache those files up to 12 hours.

Your options are:

Set the SEND_FILE_MAX_AGE_DEFAULT configuration directive to a shorter value; it is set to 43200 but you can set it to 0 if you really want to.
Add a cache buster query parameter to your static URLs; if your static URLs end with ?<somerandomvalue> your browser will reload the resource if that random value ever changes. You could do this by hand each time or you can use this Flask snippet to override the url_for() function to add such a value for you based on the file modification time.
Use an incognito browser window (private browsing mode in other browsers) to force your browser to ignore the cache for a specific session. Each time you open a new incognito tab or window, the cache should be invalidated for that session.

hey, your answer worked. But I want to mention that the snipped from your second point doesn't say where to put it and it is also missing the import statements. So maybe for people coming here, just mentioning this, could help reduce the time to google for it. ```import os ``` and ```from flask import url_for``` — Visores, Dec 10 '17 at 07:43

score 12 · Answer 2 · answered Jun 29 '17 at 15:59

12

Please use ctrl + f5 because when you use simple refresh it shows data from cache but when you do ctrl + f5 it render new data

answered Jun 29 '17 at 15:59

dheeraj

368
2
8

Saeid · Answer 3 · 2015-06-08T20:27:02.110

2

I guess it's because of the fact that your browser catches CSS files. In fact, there is no way for browser to detect your changes unless you refresh your page manually by pressing Ctrl+F5 and force browser to flush the resources.

Update 1:

~~The only~~ One way to fix this is to add a randomly generated suffix to your CSS/JavaScript files and change those values whenever you make a change to your files. This way, the browser catches the latest CSS file and ignores the previous files.

edited Jun 08 '15 at 20:27

answered Jun 08 '15 at 19:30

Saeid

1,573
3
19
37

That's not the only fix. – Martijn Pieters Jun 08 '15 at 19:38

score 2 · Answer 4 · edited Jun 24 '18 at 11:33

2

Ctrl+Shift+R to refresh the page works well.

edited Jun 24 '18 at 11:33

Robert Columbia

6,313
15
32
40

answered Jun 24 '18 at 06:00

fruitvodka

21
1

Flask does not load CSS file..?

4 Answers4

Update 1: