7

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'>
Improve this question
4
  • Flask adds cache headers; your browser will not just load the file again while the cache is still fresh. Commented Jun 8, 2015 at 19:26
  • @MartijnPieters I'm extremely new to web dev could you explain briefly cache headers and how I fix the problem. Commented Jun 8, 2015 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 flask.pocoo.org/snippets/40 Commented Jun 8, 2015 at 19:32
  • Also see Flask static file Cache-Control Commented Jun 8, 2015 at 19:32

4 Answers 4

Reset to default
16

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

Improve this answer

Comments

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.

Improve this answer

1 Comment

That's not the only fix.
2

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.