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-19T11:42:33.967

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.

score 0 · Answer 2 · edited May 23 '17 at 10:32

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 '17 at 10:32

Community

1
1

answered May 12 '15 at 09:39

w33z33

378
2
17

can you access the files via the url directly? – w33z33 May 12 '15 at 09:54
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 May 12 '15 at 10:08
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 – Ulyarez May 12 '15 at 10:36
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. http://stackoverflow.com/questions/16351826/flask-url-for-referencing-static-files – w33z33 May 12 '15 at 10:42

Flask Templates couldn't load css

2 Answers2