Flask Templates couldn't load css

Question

I followed this tutorial for develop templates with flask http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates

My file tree is the next one:

/static /js bootstrap.min.js jquery_1.11.3.js /css bootstrap.min.css /images /templates index.html /python_venv server.py

server.py code:

 @app.route('/subdomain/') def getPrevisionPoblacion(): return render_template('index.html')

And css link inside index.html code is the following:

 <script src="/static/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/static/css/bootstrap.min.css"/> <script src="/static/js/jquery_1.11.3.js"></script>

nginx config:

 location /subdomain/{ root /apps/subdomain/static; uwsgi_pass unix:///tmp/subdomain.sock; include uwsgi_params; }

When I check it on Chrome, the index didn't load the CSS files. I checked the network with Developer's tools and the error is 404. I tried also similar code that i saw on this unresolved question without success Inline CSS background:url() not working in Jinja2 template

Any help about this ?

Ulyarez · Accepted Answer · 2015-05-19 11:42:33Z

The problem was the server.

I had to serve static folder for flask template can load css.

I wrote in nginx config file the next:

 location /subdomain/static)/ { root /opt/apps/content_folder/static; }

I don't use url_for() function y wrote the resource's URL as:

 static/css/my_css_template.css

Finally check out @app.route() inside the file that render the template was correct then flask template could access to css, images and js.

Community · Accepted Answer · 2017-05-23 10:32:39Z

0

if you put the static files directly under the /static folder, this should work

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

if you do not want that, follow the instructions in this questions approved answer,

Link to Flask static files with url_for

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered May 12, 2015 at 9:39

w33z33

3783 silver badges18 bronze badges

4 Comments

w33z33 Over a year ago

can you access the files via the url directly?

Ulyarez Over a year ago

No, I can't. The web use Nginx and uwgsi, the config file have other subdomains with the same config and I can access the files. I edited the original post with the nginx config.

Ulyarez Over a year ago

Yes, i also tried that before, I get 500 error. I tried {{ url_for('static', filename='css/bootstrap.min.css') }} I get no error but I can't access the CSS files. I think it could be the server config

w33z33 Over a year ago

i looked and somebody had the same problem as you. you either put the files directly under /static, or if you want to use the folders you have to use the code in the solution. stackoverflow.com/questions/16351826/…

Collectives™ on Stack Overflow

Flask Templates couldn't load css

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related