Django 1.7 - serving CSS static files in development

Question

I'm losing my mind over static files in Django. There are tons of questions about this on SO already:

This one has a good description of the needed variables
Django Static Tag
Django 1.7 Serving Static Files

and of course the official Django documentation: Django 1.7 Static Files

But many of these are about older versions of Django, and there are many variations of answers and methods. After hours of reading and trying different settings, I'm not able to serve the css files. For some reason, it only serves images and js files. I'm new to css, js, and django, so I'm not sure where I'm going wrong.

I am using Django 1.7, with the development server.

file structure:

mysite
   mysite/
      urls.py
      views.py
      settings.py
      etc
   static/
     css/
        ...
        stuff
        style.css
     images/
     js/
   templates
      index.html

settings.py:

STATIC_ROOT = ''
STATIC_URL = '/static/'

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django.contrib.staticfiles.finders.DefaultStorageFinder',
)

TEMPLATE_DIRS = (
    os.path.join(BASE_DIR,  'templates'),
)

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),  # where I put my static files
)

TEMPLATE_CONTEXT_PROCESSORS = [
    'django.contrib.auth.context_processors.auth',
    "django.core.context_processors.debug",
    "django.core.context_processors.i18n",
    "django.core.context_processors.media",
    "django.core.context_processors.static",
    'django.core.context_processors.request',
    "django.core.context_processors.tz",
    "django.contrib.messages.context_processors.messages",
]

From what I understand, in Django 1.7 you don't need to use STATIC_ROOT when using runserver.

urls.py

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'mysite.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),

    url(r'^admin/', include(admin.site.urls)),
    url(r'^$', 'mysite.views.index', name='index'),
)

relevant line from views.py:

return render_to_response("index.html", {'some_var': 'foo'},   context_instance=RequestContext(request))

And finally, from index.html:

{% load staticfiles %}
...
<script src="{% static "js/skel.min.js" %}"></script>
<script src="{% static "js/skel-panels.min.js" %}"></script>
<script src="{% static "js/init.js" %}"></script>
<link rel="stylesheet" href="{% static "/css/style.css" %}"/>

It seems that my files are all served properly except for the CSS files. The page (which is an html/css/js template that I downloaded) seems to be missing the styling, but I can see the images on the page. Here is what I get from running manage.py runserver:

[25/May/2015 09:23:46] "GET /static/js/skel.min.js HTTP/1.1" 304 0
[25/May/2015 09:23:46] "GET /static/js/skel-panels.min.js HTTP/1.1" 304 0
[25/May/2015 09:23:46] "GET /static/js/init.js HTTP/1.1" 304 0
[25/May/2015 09:23:46] "GET /css/style.css HTTP/1.1" 404 2183
[25/May/2015 09:23:46] "GET /css/style-desktop.css HTTP/1.1" 404 2207
[25/May/2015 09:23:46] "GET /static/images/pic01.jpg HTTP/1.1" 304 0
[25/May/2015 09:23:46] "GET /static/images/pics02.jpg HTTP/1.1" 304 0

I can see that the other static files have the correct paths. So why do only the CSS files not have the /static/ prefix? What am I doing wrong?

rnevius · Accepted Answer · 2015-05-25T09:53:00.230

3

The path to your static css assets has an un-needed slash. It should be:

{% static "css/style.css" %}

To clarify, this path should be relative to your static root. Prepending the slash causes Django to try to load the static files relative to site root, rather than the static root.

edited May 25 '15 at 09:53

answered May 25 '15 at 09:47

rnevius

26,578
10
58
86

Django 1.7 - serving CSS static files in development

1 Answers1