Here is the directory structure of my python/flask application.
application
templates/
static/css/style.css
static/js/appjs.js
In my "head" i have added this.
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" />
JS file working fine but style.css is not working. But style.css is accessible through the url and also available in page source view
http://localhost:5000/static/css/style.css
CSS stylesheets are considered static files. There is no interaction with their code, like there is with HTML templates. Therefore, flask has reserved a separate folder where you should put static files such as CSS, Javascript, images or other files. That folder should be created by you and should be named static.
To reference the static files using the url_for() function, pass in the name of the directory – static in this case – and the keyword argument of filename= followed by your static file name. Flask automatically creates a static view that serves static files from a folder named static in your application's directory.
To add template files like HTML, CSS, JavaScript in Flask application, you need to maintain a certain folder structure like below: Crate a folder for HTML files inside your root directory. I am giving name of that folder as “ templateFiles “ Create a folder for static files like CSS, images etc.
Had the same mistake and solved it in a very funny way after I had read your posts. I started my app and started researching by right-clicking on my Flask website from my browser. After a few seconds, inexplicably, the CSS picked up.(Cache?!?!)
I hope this helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With