Flask css not updating

Question

I am using Flask (the python Package) on my mac, when I first wrote my css it displayed ok. However when I updated it and tried to check it, I only see the first css styles. I have tried restarting the terminal, as well as reinstalling Flask. Any suggestions? Thanks. Heres the HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>Title</title>   
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>

    <header>
        <div class="header"></div>
        <div class="logo">
            <center><img src="/static/img/p_logo.png" alt="pic"/></center>
        </div>
    </header> 

    <div class="container">
        {% block content %}
        {% endblock %}
    </div>

</body>

And heres the CSS:

    * {
font-family: "Times New Roman", Times, serif;
}

header {
background-color: #000000;
width: 100%;
height: 7px;

}

Did you try reloading the page using Shift + Ctrl + R? (This clears the browser's cache for the page.) — Aylen, Feb 12 '14 at 01:08
I am also facing it..........This is a problem with the flask server...this should be addressed by the flask Team!!! — Amitku, Sep 18 '16 at 11:30
from datetime import timedelta # setting cache time out app.config['SEND_FILE_MAX_AGE_DEFAULT'] = timedelta(seconds=1) or app.send_file_max_age_default = timedelta(seconds=1) — iHTCboy, Apr 15 '18 at 04:17
"This question was caused by a problem that can no longer be reproduced or a simple typographical error." No it wasn't, I just got a repro of this today, July 11th, 2019. — Mark Allen, Jul 12 '19 at 00:01
just come across this pain , and figured it out , you need to clear your browser cache , while searching for solving , i've come across `app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0` , might as wll give a try...clear your browser cache , than use that code below `app = Flask(__name__)` — Amirul Akmal, Mar 29 '21 at 13:19
I've just tried the code , and yup , it works like a charm , so the problem is `browser cache`...Clear your cache first , than use that code...and why is it closed tho — Amirul Akmal, Mar 29 '21 at 13:21

score 54 · Accepted Answer · edited Apr 15 '18 at 08:42

54

Problem is, as already said, related to browser cache.

To solve that, you could add some dynamic variable to your static (css, js) links. I prefer last modified timestamp for each file.

/static/css/style.css?q=1280549780

Here is a snippet for that:

http://flask.pocoo.org/snippets/40/

@app.context_processor
def override_url_for():
    return dict(url_for=dated_url_for)

def dated_url_for(endpoint, **values):
    if endpoint == 'static':
        filename = values.get('filename', None)
        if filename:
            file_path = os.path.join(app.root_path,
                                 endpoint, filename)
            values['q'] = int(os.stat(file_path).st_mtime)
    return url_for(endpoint, **values)

edited Apr 15 '18 at 08:42

YakovL

7,557
12
62
102

answered Feb 12 '14 at 12:34

Jacek Kaniuk

5,229
26
28

3

This is totally problematic to work with flask...is there any other solution?? – Amitku Sep 18 '16 at 11:33
19

It's not a problem inherent to Flask framework but browser caching. You could always disable browser cache by appropriate headers, but this is not a solution for production server. _There are only two hard things in Computer Science: cache invalidation and naming things._ -- Phil Karlton – Jacek Kaniuk Sep 20 '16 at 07:33
2

Ive never had this problem with anything apart from flask – NOP da CALL Feb 21 '18 at 09:43
3

Jacek Kaniuk: Are you sure it's related to browser cache? When I install brand new browser, I have still the same problem. Yes, the first time I open the url, the .css files loaded are not the newest ones. – culter Jul 20 '18 at 14:24
What do you mean by 'brand new browser'? Like reinstalling Chrome or something? – Aug 21 '18 at 17:42
1

@culter Yes, it's related to browser cache. There are similarities to how the browsers cache css and js, so you'll find this problem appears in all browsers. – Jason Oct 11 '18 at 20:14
@DuncanWhyte By installing new browser, I mean install of a new web browser. Some browser, that was never installed on the OS in the past. – culter Oct 11 '18 at 21:08
@Jason In my case it had nothing to do with browser cache. I opened 2 simultaneous SSH connections to the server via putty and that was the problem. When I closed one of them, everything worked fine. – culter Oct 11 '18 at 21:09
Or you can return response header like stated here: https://stackoverflow.com/questions/34066804/disabling-caching-in-flask – Tim Jul 12 '19 at 21:06
I had the same issue and it was a because Chrome was caching the old css. You can troubleshot by doing a hard reload on your browser tab. Also inspect the css file in Chrome to make sure it is having the expected content. – kamayd Apr 30 '20 at 14:52
1

Just a note that your link is broken and it [doesn't look like they are going to bring snippets back](https://github.com/pallets/website/issues/41) – roganjosh Aug 08 '20 at 11:11
or else open it on incognito mode – Kavyajeet Bora Aug 02 '21 at 18:03

Flask css not updating

1 Answers1

Linked

Related