Application not picking up .css file (flask/python)
Solution 1
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
Solution 2
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.
Solution 3
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.
Solution 4
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" >
Here the structure of the folders
Solution 5
<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
Related videos on Youtube
Comments
-
Zack about 2 years
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?
-
Zack about 10 yearsThis is giving me an error unfortunately. BuildError: ('mainpage.css', {}, None)
-
Mr. Concolato about 7 yearsNot 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.
-
user3002996 over 5 yearsSorry, but could you please describe exactly what you did? I am struggling with the same issue!
-
Gopi P over 4 yearsto 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
-
HAr about 4 yearsfor Javascript add script file to static folder.
<script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>
-
Alexis almost 4 yearsThank you so much it solved my problem in Google Chrome ( Ctrl + shift + R). Any way to ignore cached files automatically ?
-
Zohaib Hamdule over 3 yearsDamn I had no idea css files would be cached and would not reload. Thanks a lot.
-
maciejwww over 3 yearsI'm using Firefox and
Ctrl + shift + R
was the way. -
Aivoric about 3 yearsThanks, this helped! On a mac its Command + Shift + R
-
ShankarAnand almost 3 yearshow to do the same in css file. "@import url(static/css/animate.css); " this is not working and shows 404 error
-
Hackytech almost 3 yearsohh, Great, will edit my post adding mac command too
-
Loop Assembly over 2 yearsi was finding the command for mac thx a lot
-
Rylan Schaeffer over 2 yearsWhen I try this, I get the error
Uncaught SyntaxError: unexpected token: 'static'
. I'm specifically trying<img src="{{url_for('static', filename='images/colormap_white.png')}}">
. What am I doing wrong? -
Rylan Schaeffer over 2 yearsWhen I try this, I get the error
Uncaught SyntaxError: unexpected token: 'static'
. I'm specifically trying<img src="{{url_for('static', filename='images/colormap_white.png')}}">
. What am I doing wrong?