[Answer]-Cannot find screen.css compass/sass in django project that is compiling correctly

by

1👍

✅

If you want to keep your layout this way, you need to add stylesheets to your STATICFILES_DIRS:

1) Updating STATICFILES_DIRS

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'staticfiles'),
    os.path.join(BASE_DIR, 'stylesheets'),
)

2) Updating base.html

– load staticfiles
– embed the stylesheet using the {% static %} tag

{% load staticfiles %}
{% block main_header %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sitename</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
        {% block custom_stylesheets %}{% endblock %}
        <link href="{% static "screen.css" %}" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
{% endblock %}

Update: Why it wasn’t working before

Especially in the beginning it takes a bit of time to get a feeling for the separation of what Django calls static and media files and the Python/Django code that drives the app.

The important bit is that from your directory layout, no directory is accessible from your webserver. This is why if we want to use custom directory layouts we need to tell Django about the directories where we put static assets (css, javascript, images, fonts, ..). We do that by adding the STATICFILES_DIRS setting:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'staticfiles'),
    os.path.join(BASE_DIR, 'stylesheets'),
)

Now Django knows to look for static files in both of these directories. That’s a first step.

The next important thing is the STATIC_URL setting:

STATIC_URL = '/static/'

This tells Django the base URL to expose the static files. Let’s say we have these files

/staticfiles/
    logo.jpg
    bg_tile.png
    js/
      app.js  
/stylesheets/
    styles.css
    styles_mobile.css

With the above settings, Django will provide them uniquely under the namespace we define in STATIC_URL, which means that we can access them like this:

http://example.com/static/logo.jpg
http://example.com/static/bg_tile.png
http://example.com/static/js/app.js
http://example.com/static/styles.css
http://example.com/static/styles_mobile.css

Long story short, independently from their physical location Django makes them accessible through the unique /static/ url.

This is the reason why <link href="/stylesheets/style.css".../> didn’t work. The webserver (while developing probably runserver, in production something like nginx or apache) just doesn’t know anything about the stylesheets directory.

So the final step was to use Django’s static templatetag to create the link. This ensures that if you ever change the STATIC_URL setting (e.g. from /static/ to /assets/) you don’t need to touch any of your templates because {% static %} resolves it correctly for you.

Once it gets to deploying your app to a live site it gets a bit more involved (but not so much), but I hope this is enough information to get you started.

👤sthzg

Leave a comment