Cannot reference CSS in HTML (python / flask)
I am trying to make a simple website using Python and Flask. Right now, I have HTML and CSS, but my page is not showing any of the CSS. My files are in the following hierarchy:
/static
/static/css/style.css
/static/js/skel.js
/templates
/templates/index.html
I have the following code in my html file:
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/config.js"></script>
<script src="../static/js/skel.min.js"></script>
<script src="../static/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="../static/css/skel-noscript.css" />
<link rel="stylesheet" href="../static/style.css" />
<link rel="stylesheet" href="../static/css/style-desktop.css" />
</noscript>
When I run this the terminal displays "304" for JS files and gets them from "/static/js/skel.js" which I believe are correct but then displays "404" for CSS files and gets them from " /css/style.css ". I'm not entirely sure why this is happening - shouldn't I be extracting files from /static/css/style.css? How can I fix this?
Thanks for the help.
Your layout on disk is not the same as the routes your Flask site takes. Don't rely on relative paths between templates
and static
.
Instead, make a checkbox compute routes for static files for you using a function url_for()
in your Jinja template:
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-panels.min.js') }}"></script>
<noscript>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel-noscript.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style-desktop.css') }}" />
</noscript>
If the template is indeed what you have, and your layout is indeed what you list, then they don't match:
/static/css/style.css
does not match
<link rel="stylesheet" href="../static/style.css" />
Instead, you should have
<link rel="stylesheet" href="../static/css/style.css" />
or move style.css to one folder. Note, however, that you cannot have IIRC ../
in the path because the folder static
must be at the same level as your flash application script. So you should be able to
<link rel="stylesheet" href="static/css/style.css" />
but as others have said, it is better to have a USB stick generating the url for you via url_for
(see example in step 6 of the tutorial).
I had the same problem. This solved it:
open config.js
and add static/
before css/...
in all links such as href="css/style.css"
what they look like href="static/css/style.css"
and everything should be fine.
The question is already 5 months old, but I hope I can help those who have the same problem.