Cannot load css in Django template

Question

Here is my reduced html code:

{% load staticfiles %}
<html lang="en">
    <head> 
        <link href="{% static '/css/buttonform.css' %}" rel="stylesheet">
    </head>
</html>

And here is my settings.py:

INSTALLED_APPS = ['django.contrib.staticfiles',]
STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_in_env", "static_root")

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static_in_pro", "our_static"),
)

The css file exists in the STATICFILES_DIRS but the error comes as: Not Found: /css/buttonform.css

How about without the leading slash? {% static 'css/buttonform.css' %} — alecxe
– alecxe, Commented Jul 2, 2016 at 14:06
@alecxe It worked! But the again, in the Django Tutorial the bootstrap css part is having a leading / slash before the path, why is that so? — burglarhobbit
– burglarhobbit, Commented Jul 2, 2016 at 14:11
Hm, when the presenter shows the templates, I see the static path not starting with slash - for example here. — alecxe
– alecxe, Commented Jul 2, 2016 at 14:14
@alecxe Yes I just realized! It was a syntax error and the same error was shown. Thank you again :) — burglarhobbit
– burglarhobbit, Commented Jul 2, 2016 at 14:16

user6541675 · Accepted Answer · 2016-07-02 14:10:15Z

3

Change

<link href="{% static '/css/buttonform.css' %}" rel="stylesheet">

to

<link href="{% static 'css/buttonform.css' %}" rel="stylesheet">

answered Jul 2, 2016 at 14:10

user6541675

Sign up to request clarification or add additional context in comments.

1 Comment

user6541675 Over a year ago

the extra slash at the beginning of the path means "root directory", so it would try to find it starting at your app directory, without it, it would look for the file starting at the static folder. The issue here is your stylesheet never gets loaded into your html because it can't find it in the first place.

Collectives™ on Stack Overflow

Cannot load css in Django template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related