Django — Can't get static CSS files to load

Question

I’m running Django’s development server (runserver) on my local machine (Mac OS X) and cannot get the CSS files to load.

Here are the relevant entries in settings.py:

STATIC_ROOT = '/Users/username/Projects/mysite/static/'

STATIC_URL = '/static/'

STATICFILES_DIRS = (
'/Users/thaymore/Projects/mysite/cal/static',
)

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

INSTALLED_APPS = (
# other apps ...
'django.contrib.staticfiles',
)

In my views.py I’m requesting the context:

return render_to_response("cal/main.html",dict(entries=entries),context_instance=RequestContext(request))

And in my template the {{ STATIC_URL }} renders correctly:

<link type="text/css" href="{{ STATIC_URL }}css/main.css" />

Turns into:

<link type="text/css" href="/static/css/main.css"/>

Which is where the file is actually located. I also ran collectstatic to make sure all the files were collected.

I also have the following lines in my urls.py:

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns += staticfiles_urlpatterns()

I’m new to Django so am probably missing something simple — would appreciate any help.

Asked By: tchaymore

||

Source

Answer 1

Read this carefully:
https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/

Is django.contrib.staticfiles in your INSTALLED_APPS in settings.py?

Is DEBUG=False? If so, you need to call runserver with the --insecure parameter:

python manage.py runserver --insecure

collectstatic has no bearing on serving files via the development server. It is for collecting the static files in one location STATIC_ROOT for your web server to find them. In fact, running collectstatic with your STATIC_ROOT set to a path in STATICFILES_DIRS is a bad idea. You should double-check to make sure your CSS files even exist now.

Answered By: GDorn

Answer 2

Are these missing from your settings.py? I am pasting one of my project’s settings:

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.contrib.messages.context_processors.messages")

Also, this is what I have in my urls.py:

urlpatterns += patterns('', (
        r'^static/(?P<path>.*)$',
        'django.views.static.serve',
        {'document_root': 'static'}
))

Answered By: Geo

Answer 3

You had same path in STATICFILES_DIRS AND STATIC_ROOT, I ran into the same issue and below was the exception –

ImproperlyConfigured: The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting

For local you don’t need STATICFILES_DIRS, as anyway you don’t need to run collectstatic. Once you comment it, it should work fine.

Answered By: Mutant

Answer 4

Have you added into your templates:

{% load staticfiles %}

This loads what’s needed, but for some reason I have experienced that sometimes work without this… ???

Answered By: viridis

Answer 5

I tried this model and it worked.

Changes in settings as per the django project created with shell

"django-admin.py startproject xxx"# here xxx is my app name

modify the folder as below structure loading our static files to run on server

Structure of xxx is:

>     .
>     |-- manage.py
>     |-- templates
>     |   `-- home.html
>     `-- test_project
>         |-- __init__.py
>         |-- settings.py
>         |-- static
>         |   |-- images
>         |   |   `-- 01.jpg
>         |   |-- style.css
>         |-- urls.py
>         `-- wsgi.py

– modifications in Settings.py

import os
INSTALLED_APPS = (    'xxx',# my app is to be load into it)

STATIC_ROOT = ''
STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(__file__)
TEMPLATE_DIRS = (      os.path.join(PROJECT_DIR, '../templates'),)#include this

– modifications in urls.py

from django.conf.urls import patterns, include, url
from django.views.generic import TemplateView

class DirectTemplateView(TemplateView):
    extra_context = None
    def get_context_data(self, **kwargs):
        context = super(self.__class__, self).get_context_data(**kwargs)
        if self.extra_context is not None:
            for key, value in self.extra_context.items():
                if callable(value):
                    context[key] = value()
                else:
                    context[key] = value
        return context

urlpatterns = patterns('', 
    url(r'^$', DirectTemplateView.as_view(template_name="home.html")), )

– home.html

<html>
    <head>
        <link href="{{STATIC_URL}}style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>This is home for some_app</h1>
      <img src="{{STATIC_URL}}/images/01.jpg" width=150px;height=150px; alt="Smiley ">
    </body>
</html>

Answered By: ayu for u

Answer 6

DEBUG = True in my local settings did it for me.

Answered By: webjay

Answer 7

I had to use

STATICFILES_DIRS = ( '/home/USERNAME/webapps/django/PROJECT/static/', )

That helped me.

Answered By: jwebuser

Answer 8

See if your main application (where the static directory is located) is included in your INSTALLED_APPS.

Files are searched by using the enabled finders. The default is to look in all locations defined in STATICFILES_DIRS and in the ‘static’ directory of apps specified by the INSTALLED_APPS setting.

Answered By: Guy de Carufel

Answer 9

added

PROJECT_ROOT = os.path.normpath(os.path.dirname(__file__))
STATICFILES_DIRS = ( os.path.join(PROJECT_ROOT, "static"), )

and removed STATIC_ROOT from settings.py, It worked for me

Answered By: Vinner

Answer 10

Another simple thing to try is to stop, and then restart the server e.g.

$ python manage.py runserver

I looked into the other answers, but restarting the server worked for me.

Answered By: ibowman

Answer 11

These steps work for me, just see Load Static Files (CSS, JS, & Images) in Django

I use Django 1.10.

create a folder static on the same level of settings.py, my settings.py‘s path is ~/djcode/mysite/mysite/settings.py, so this dir is ~/djcode/mysite/mysite/static/;
create two folders static_dirs and static_root in static, that’s ~/djcode/mysite/mysite/static/static_dirs/ and ~/djcode/mysite/mysite/static/static_root/;

write settings.py like this:

# Static files (CSS, JavaScript, Images)

# https://docs.djangoproject.com/en/1.10/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'mysite', 'static', 'static_root')

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'mysite', 'static', 'static_dirs'),
)

do this command $ python manage.py collectstatic in shell;
create a folder css in static_dirs and put into your own .css file, your css file’ path is ~/djcode/mysite/mysite/static/static_dirs/css/my_style.css;
change <link> tag in .html file: <link rel="stylesheet" type="text/css" href="{% static 'css/my_style.css' %}">,

Finally this link’s path is http://192.168.1.100:8023/static/css/my_style.css

Bingo!

Answered By: Belter

Answer 12

Add this "django.core.context_processors.static", context processor in your settings.py

TEMPLATE_CONTEXT_PROCESSORS = (
"django.core.context_processors.static",

)

Answered By: cjahangir

Answer 13

For recent releases of Django, You have to configure static files in settings.py as,

STATIC_URL = '/static/' # the path in url

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

and use it with static template tag,

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

Answered By: All Іѕ Vаиітy

Answer 14

Add the following code to your settings.py:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

After that, create the static folder at the root directory of your project.

To load the static files on templates use:

{% load static %}
  <img src="{% static "images/index.jpeg" %}" alt="My image"/>

Answered By: Alan Paul

Answer 15

You can just set STATIC_ROOT depending on whether you are running on your localhost or on your server. To identify that, refer to this post.

And you can rewrite you STATIC_ROOT configuration as:

import sys

if 'runserver' in sys.argv:
    STATIC_ROOT = ''
else:
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

Answered By: Aslamah Rahman

Answer 16

If you set DEBUG=FALSE
you need to do follow steps

In your urls.py file:
add this line

from django.views.static import serve

url(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
url(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),

Answered By: Thusitha Deepal

Answer 17

I have the same issue (ununtu 16.04 server).

This helped me

python manage.py collectstatic –noinput

Answered By: alcoder

Answer 18

add following in settings.py

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')  
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Answered By: Amandeep Singh

Answer 19

Two most Basis points to be noted for running Static files in Django Application are – Declare static file path in your settings.py file

STATIC_URL = '/static/'

Another important parameter is the web page in which you are using static keyword, you need to load the static files.

{% load static %}

Answered By: rathourdevesh

Answer 20

Go to your HTML page load static by

{% load static %}

Now only mistake I’ve made was this

My code:

<img src="**{% static** "images/index.jpeg" %}" alt="My image">

Updated:

<img src=**"{% static 'images/index.jpeg' %}' alt="My image"**>

You get it right

Answered By: Aditya Rajgor

Answer 21

I had same issue check your settings.py and make sure STATIC_URL = ‘/static/’
in my case first / at the beginning was missing and that was causing all static files not to work

Answered By: badger

Django — Can't get static CSS files to load

Question:

Answers: