Application not picking up .css file (flask/python)

Question

I am rendering a template, that I am attempting to style with an external style sheet. File structure is as follows.

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html looks like this

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

None of my styles are being applied though. Does it have something to do with the fact that the html is a template I am rendering? The python looks like this.

return render_template("mainpage.html", variables..)

I know this much is working, because I am still able to render the template. However, when I tried to move my styling code from a "style" block within the html's "head" tag to an external file, all the styling went away, leaving a bare html page. Anyone see any errors with my file structure?

score 391 · Accepted Answer · answered Mar 07 '14 at 21:14

391

You need to have a 'static' folder setup (for css/js files) unless you specifically override it during Flask initialization. I am assuming you did not override it.

Your directory structure for css should be like:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

Notice that your /styles directory should be under /static

Then, do this

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

Flask will now look for the css file under static/styles/mainpage.css

answered Mar 07 '14 at 21:14

codegeek

32,236
12
63
63

8

for Javascript add script file to **static** folder. `` – HAr Apr 28 '20 at 12:25
how to do the same in css file. "@import url(static/css/animate.css); " this is not working and shows 404 error – ShankarAnand Jun 10 '21 at 18:23
When I try this, I get the error `Uncaught SyntaxError: unexpected token: 'static'`. I'm specifically trying ``. What am I doing wrong? – Rylan Schaeffer Feb 10 '22 at 23:23

njzk2 · Answer 2 · 2014-03-07T20:45:20.417

26

In jinja2 templates (which flask uses), use

href="{{ url_for('static', filename='mainpage.css')}}"

The static files are usually in the static folder, though, unless configured otherwise.

edited Mar 07 '14 at 20:45

answered Mar 07 '14 at 20:27

njzk2

38,969
7
69
107

1

This is giving me an error unfortunately. BuildError: ('mainpage.css', {}, None) – Zack Mar 07 '14 at 20:36
When I try this, I get the error `Uncaught SyntaxError: unexpected token: 'static'`. I'm specifically trying ``. What am I doing wrong? – Rylan Schaeffer Feb 10 '22 at 23:23

score 17 · Answer 3 · answered Jan 31 '20 at 15:03

17

Still having problems after following the solution provided by codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}"> ?

In Google Chrome pressing the reload button (F5) will not reload the static files. If you have followed the accepted solution but still don't see the changes you have made to CSS, then press ctrl + shift + R to ignore cached files and reload the static files.

In Firefox pressing the reload button appears to reload the static files.

In Edge pressing the refresh button does not reload the static file. Pressing ctrl + shift + R is supposed to ignore cached files and reload the static files. However this does not work on my computer.

answered Jan 31 '20 at 15:03

Christian Johansen

171
1
3

Thank you so much it solved my problem in Google Chrome ( Ctrl + shift + R). Any way to ignore cached files automatically ? – Alexis Aug 10 '20 at 18:38
Damn I had no idea css files would be cached and would not reload. Thanks a lot. – Zohaib Hamdule Nov 29 '20 at 14:37
I'm using Firefox and `Ctrl + shift + R` was the way. – maciejwww Jan 22 '21 at 11:02

score 8 · Answer 4 · edited Apr 03 '19 at 20:06

I have read multiple threads and none of them fixed the issue that people are describing and I have experienced too.

I have even tried to move away from conda and use pip, to upgrade to python 3.7, i have tried all coding proposed and none of them fixed.

And here is why (the problem):

by default python/flask search the static and the template in a folder structure like:

/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
 and 
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>

you can verify by yourself using the debugger on Pycharm (or anything else) and check the values on the app (app = Flask(name)) and search for teamplate_folder and static_folder

in order to fix this, you have to specify the values when creating the app something like this:

TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')

# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)

the path TEMPLATE_DIR and STATIC_DIR depend on where the file app is located. in my case, see the picture, it was located within a folder under src.

you can change the template and static folders as you wish and register on the app = Flask...

In truth, I have started experiencing the problem when messing around with folder and at times worked at times not. this fixes the problem once and for all

the html code looks like this:

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

This the code

Here the structure of the folders

loopassembly · Answer 5 · 2023-04-13T13:07:08.250

8

Add the following to your code:-

 <link
   rel= "stylesheet"
   type= "text/css" 
   href= "{{ url_for('static',filename='name of css file') }}"
  >

if you have linked your css like above and its not working then you can do the following:-

Chrome => ctrl + shift + R

Edge => ctrl + shift + R

Firefox => ctrl + shift + R

edited Apr 13 '23 at 13:07

answered May 06 '21 at 15:12

loopassembly

2,653
1
15
22

score 3 · Answer 6 · edited Jun 03 '20 at 11:38

3

One more point to add.Along with above upvoted answers, please make sure the below line is added to app.py file:

app = Flask(__name__, static_folder="your path to static")

Otherwise flask will not be able to detect static folder.

edited Jun 03 '20 at 11:38

sɐunıɔןɐqɐp

3,332
15
36
40

answered Jun 03 '20 at 11:02

Sanjay Nandakumar

383
2
10

Hackytech · Answer 7 · 2021-11-17T05:38:32.303

3

If any of the above method is not working and your code is perfect then try hard refreshing by pressing ( Ctrl + F5 )for windows and for mac ( hold down Cmd and Shift and then press R [Command + Shift + R ]). It will clear all the caches and then reload file. It worked for me.

edited Nov 17 '21 at 05:38

answered Jul 26 '20 at 06:06

Hackytech

317
2
11

1

Thanks, this helped! On a mac its Command + Shift + R – Aivoric Mar 20 '21 at 13:04
ohh, Great, will edit my post adding mac command too – Hackytech Aug 13 '21 at 07:12
1

i was finding the command for mac thx a lot – loopassembly Nov 08 '21 at 16:57

score 2 · Answer 8 · edited Aug 13 '19 at 21:38

2

I'm running version 1.0.2 of flask right now. The above file structures did not work for me, but I found one that did, which are as follows:

     app_folder/ flask_app.py/ static/ style.css/ templates/
     index.html

(Please note that 'static' and 'templates' are folders, which should be named exactly the same thing.)

To check what version of flask you are running, you should open Python in terminal and type the following accordingly:

import flask

flask --version

edited Aug 13 '19 at 21:38

Imran S M

466
2
9
20

answered Oct 26 '18 at 23:50

Ly-Bach

21
1
4

Sorry, but could you please describe exactly what you did? I am struggling with the same issue! – user3002996 Nov 16 '18 at 12:52

score 1 · Answer 9 · answered Jun 28 '21 at 13:29

1

Weirdly, for me having a "static" folder along with naming my .css file as "main.css" works. If I have any other filename - for instance "styles.css" or "mainstyle.css" the style is not reflected on the page when it renders.

answered Jun 28 '21 at 13:29

Archit K

11
3

score 0 · Answer 10 · answered Sep 14 '19 at 14:44

0

The flask project structure is different. As you mentioned in question the project structure is the same but the only problem is wit the styles folder. Styles folder must come within the static folder.

static/styles/style.css

answered Sep 14 '19 at 14:44

Gopi P

525
9
19

score 0 · Answer 11 · answered May 22 '20 at 04:07

0

One more point to add on to this thread.

If you add an underscore in your .css file name, then it wouldn't work.

answered May 22 '20 at 04:07

SW Jeong

138
1
11

score 0 · Answer 12 · answered Sep 19 '21 at 17:38

If you want to connect the html and css when you are using Blueprints within Flask:

Make sure you have the templates and static folder set: core = Blueprint('core', name, template_folder='templates', static_folder='static')
add the url_for in your href code:

score -9 · Answer 13 · edited May 23 '17 at 12:02

-9

I'm pretty sure it's similar to Laravel template, this is how I did mine.

<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />

Referred: CSS file pathing problem

Simple flask application that reads its content from a .html file. External style sheet being blocked?

edited May 23 '17 at 12:02

Community

1
1

answered Mar 07 '14 at 20:24

nCore

2,027
7
29
57

2

Not going to down vote you but for your edification, Laravel is PHP and Flask is Python. They do not work in a similar way. They have very different directory structures and behaviors. – Mr. Concolato Mar 15 '17 at 17:09
to import static files we need to place those static files into a static folder. The folder structure you have given works with a normal HTML file. but not with Flask – Gopi P Sep 14 '19 at 14:42

Application not picking up .css file (flask/python)

13 Answers13

Add the following to your code:-

Linked

Related