Flask style.css not loading from static/css/style.css

Question

Here is the directory structure of my python/flask application.

application
templates/
static/css/style.css
static/js/appjs.js

In my "head" i have added this.

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

JS file working fine but style.css is not working. But style.css is accessible through the url and also available in page source view

http://localhost:5000/static/css/style.css

Solution 1

Had the same mistake and solved it in a very funny way after I had read your posts. I started my app and started researching by right-clicking on my Flask website from my browser. After a few seconds, inexplicably, the CSS picked up.(Cache?!?!)

I hope this helps

Solution 2

Clearing your browser cache solves this instantly

On Google Chrome:

1. Go to the three dots on the top right-hand corner
2. Go to Settings
3. Click on "Privacy and security"
4. Click on "Clear browsing history"
5. Select the checkbox labelled "cached images & files" and uncheck "Browsing history" & "Cookies and other site data"
6. Reload your page (make sure your server is running)
7. Your CSS should be displaying properly now

Following similar steps on other browsers should resolve this as well.

However, for every new change, you make in your CSS files, you'll have to repeat these same steps to clear your browser cache

Solution 3

HTML is not quite XML, and sometimes things aren't as neat. You're using a self-closing tag - don't. Try removing the terminating /:

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

Many browsers are pretty forgiving and will parse <link … ></link> or <link … /> just fine, but it's not guaranteed. The standard format is without.

Alternatively, you should confirm whether the issue is loading the CSS file, or the actual content of your CSS document.

Solution 4

In Flask Bootstrap, to add your custom CSS, you have to call the super function in the block styles.

 {% extends "bootstrap/base.html" %}
 {% block styles %}
 {{super()}}
  <link rel="stylesheet"
  href="{{url_for('static', filename='css/style.css')}}">
 {% endblock %}

You can read more on the docs

View more solutions

Comments

[Admin]

Thanks for answer, removing / is not making any difference to output

[daveruinseverything]

@imdrupal what HTML is rendered in the browser? If you view the page source, can you open your CSS file? Perhaps your CSS file was loading all along, but the CSS itself isn't behaving as expected.

[Admin]

Yes, I am able to see my css in page source view and also able to open in browser but the CSS itself isn't behaving as expected(as u said)

[daveruinseverything]

@imdrupal in that case this isn't really a python issue, it's a CSS issue. I'd suggest looking at the CSS itself, and posting a new question with your example CSS, HTML, and expected behaviour vs observed behaviour.

[Mateusz Korycinski]

Don't you have to load static into template first? Maybe you forgot about it? Just popping ideas out of the top of my head. Django would give you error / warning, I am not sure how exactly it is with Flask.

[Admin]

The css is fine i have tested with, <style type=text/css>{{ get_resource_as_string('static/css/style.css') }}</style>.

[Admin]

but in above case it is serving as embed css on source view of page, but working

[kae_screechae]

Ive had the same issue and surprisingly, this is the way to go. It seems flask doesn't pick up immediately on changes that you've made to your style.css. I tried everything, stopping n restarting the server, closing the app, commenting and uncommenting out the link. However, I just cleared my browser cache and it picks up the changes immediately.

[ThomasATU]

{{super()}} <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}"> Did the job! Thanks!

[G M]

Unfortunately it does not :-(

[StarbuckBarista]

This is such an underrated solution, I've been trying to fix this for days now. Thank you so much!

[Nuclear03020704]

Firefox users: Ctrl + Shift + R reloads the page and clears the cache, effectively reloading the stylesheet.