Flask app loads CSS changes only after computer restarts

Question

My problem is that the CSS is not loaded correctly when I run the app. The CSS only refreshes when I restart my computer.... this does not make any sense to me. I even tried different connecting ways( Full path, relative path, let flask create the path...)

Here is my code:

import flask


app = flask.Flask(__name__)

def get_latest_packages():
    return [
        {'name': 'flask','version': '1.2.3'},
        {'name': 'sqlalchemy', 'version': '2.2.0'},
        {'name': 'passlib', 'version': '3.0.0'}
    ]

@app.route('/')
def index():
    test_packages = get_latest_packages()
    return flask.render_template('index.html', packages = test_packages)

@app.route('/about')
def about():
    return flask.render_template('about.html')


if __name__ == '__main__':
    app.run(debug=True)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Python Package Index Demo</title>
      <link rel="stylesheet"
           href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
           crossorigin="anonymous">
          <link rel="stylesheet" type="text/css" href="/static/css/site.css"/>
   </head>
        <body>

      <nav>
         <a href="/">Home</a>
         <a href="/about">About</a>
      </nav>
      <div class="main_content">

      <h1>Python Packages Index</h1>
      <h2>Packages</h2>
         {% for p in packages %}
            <div>
                <span class="title">
                    {{ p.name.upper() }}
                </span>
                <span class="version">
                    {{ p.version }}
                </span>
            </div>
            {% endfor %}
      </div>



      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        </body>
</html>

Try a deep reload: press F5 maybe together with Shift or Ctrl. If that does not help open the CSS file in your browser directly and press F5. Don't forget to restart flask and make sure all flask processes have been stopped. — Klaus D.
– Klaus D., Commented Nov 7, 2019 at 22:54

Max Kaha · Accepted Answer · 2019-11-07 22:50:29Z

1

I had the same problem when I first started out with web development, are you sure you arent cashing the site in your browser ? The fact that a restart fixes it makes me think you do. In chrome you can open the DevTools and go to Settings to disable caching while they are open. Go to your site, press F12 and then refresh with open DevTools and see if it helps.

answered Nov 7, 2019 at 22:50

Max Kaha

9325 silver badges12 bronze badges

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

2 Comments

Snake_py Over a year ago

OMG that has done the trick.... I would have never thought about it. I was looking for hours at my code :D Thank you very much!

Max Kaha Over a year ago

@Snake_py Happy to help, happens to many people who start out with web development. Would appreciate it if you could accept my answer :)

Collectives™ on Stack Overflow

Flask app loads CSS changes only after computer restarts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related