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.
source to share
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>
source to share
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).
source to share
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.
source to share