7

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
Improve this question
0

9 Answers 9

Reset to default
8

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

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

2 Comments

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.
Firefox users: Ctrl + Shift + R reloads the page and clears the cache, effectively reloading the stylesheet.
6

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

Improve this answer

1 Comment

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

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.

Improve this answer

7 Comments

Thanks for answer, removing / is not making any difference to output
@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.
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)
@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.
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.
|
2

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

Improve this answer

1 Comment

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

Also you can try this:

<link rel="stylesheet" type="text/css" href="{{ url_for('.static', filename='vendor/fontawesome-free/css/all.min.css') }}">

not 'static', use '.static'

Improve this answer

Comments

0

As obinna said, for some reason you need to refer to a specific block in the base template which contains your bootstrap css with {{super()}}, according to original docs. Here is the final solution:

In your base.html:

{% block styles %}
<link rel="stylesheet" href="<bootstrap-resource-url>">
{% endblock %}

(change <bootstrap-resource-url> to a real url pointing to a bootstrap.css file)

Then in your whatever content.html:

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

If you only intend to use base without any child templates, it should work without any reference to a specific block.

Improve this answer

Comments

0

I also faced a somewhat similar problem i realised instead of using

    <link rel="stylesheet" href="static/css/main.css">

since ideally the html is in the templates folder while the css is in the static folder you need to move up folder

    <link rel="stylesheet" href="../static/css/main.css">

this worked for me!

Improve this answer

Comments

-1

You can add one configuration to your flask app as :

app.config['SESSION_COOKIE_SECURE'] = False

Hope it works.

Improve this answer

1 Comment

Unfortunately it does not :-(
-1

clear cache or just use ctrl + f5 on your web page and reload. i also faced the same problem and solved it in this way!

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.