Django CSS

To define where CSS files are in a Django app we can include a STATICFILES_DIRS variable that holds a list of directories with our data:

# settings.py
...
STATIC_URL="static/"
STATICFILES_DIRS = [
    "css",
]

When serving the CSS files it is much more efficient to place all CSS in a single directory, instead of having a per-app setup. The easiest way to do this is to define a STATIC_ROOT variable in settings.py that tells Django where to collect all static files:

...
STATIC_URL="static/"
STATICFILES_DIRS = [
    "css",
]
 
STATIC_ROOT = "staticfiles/"

Note that there are critical difference between each of these variables:

• STATIC_URL → This tells Django how to generate a URL where static files are served at
• STATICFILES_DIRS → This tells Django where to look for static files, in addition to places where they are stored by default
• STATIC_ROOT → Tells Django where to store static files it finds

Once the settings file is updated we can run python manage.py collectstatic to make Django copy all static files into a central location. Note that original files will not be moved.

Caution

You should not touch or modify the staticfiles dir directly

Note

With DEBUG set to True, Django doesn’t actually use the staticfiles dir - instead it looks for CSS across apps and other locations. When deploying Django, this behaviour changes.