Flask does not load css file with query string

Question

I have started to work on flask, and the problem is i have created a css file in static folder and wanted to load that css file on template.

but it is not loading css file even if i try this on incognito mode i thought it could be a cache problem but it does not.

<!DOCTYPE html>
<title> Welcome to My Blog</title>

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

<h2>Hey there {{ name }}</h2>

Image :Hello world flask app

Blog.py

from flask import Flask, request, render_template

app = Flask(__name__)


...
@app.route('/profile/<username>')
def profile(username):
    return render_template("profile.html", name=username)

...

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

style.css

h2{
    color: #00bfff;
}

vallentin · Accepted Answer · 2017-04-10 07:29:48Z

6

The problem is that you include the query string in your filename.

url_for('static', filename='style.css?v=0.01')

The url path results in static/style.css%3Fv%3D0.01, because the special characters get encoded. To fix this you must add query elements as keyword arguments:

url_for('static', filename='style.css', v=0.01)

Additionally:

Your file is called stye.css and not style.css
Your <link> tag says type="=text/css" and not type="text/css" as it should

edited Apr 10, 2017 at 7:29

answered Apr 10, 2017 at 7:06

vallentin

26.5k6 gold badges70 silver badges93 bronze badges

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

7 Comments

burc Over a year ago

i have changed it but still its the same.

burc Over a year ago

when i try to open; 127.0.0.1:8080/static/style.css?v=0.01 i get a not found error.

burc Over a year ago

i have renamed and rerun but still getting error. i have added style.css file on question.

burc Over a year ago

thank you, i got my lesson, should be more carefull about typo and control every letter before asking question :).

vallentin Over a year ago

You're welcome! To be honest I was a bit surprised Chrome didn't catch the typo and ignore it. :)

|

Raviteja Ainampudi · Accepted Answer · 2019-04-07 08:40:59Z

0

Adding to the accepted answer, Sometimes encoding itself causes the problems. Make sure you have right encoding.

<meta charset="UTF-8">

Include charset attribute in your HTML file. Also, to avoid using cached responses of your browser, try refreshing your content using ctrl + F5 keys.

edited Apr 7, 2019 at 8:40

answered Apr 5, 2019 at 16:40

Raviteja Ainampudi

2821 silver badge11 bronze badges

Comments

yashod perera · Accepted Answer · 2020-04-17 22:03:53Z

0

In my case I have added following line to my code and it worked

app.static_folder = 'static'

and you have to change the

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

to

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

answered Apr 17, 2020 at 22:03

yashod perera

7055 silver badges5 bronze badges

Collectives™ on Stack Overflow

Flask does not load css file with query string

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related