Cannot find screen.css compass/sass in django project that is compiling correctly

Question

I have a django project that I did compass init to make new compass folders inside. My compass/sass is compiling when I make changes inside it, but my template is not taking any of these changes or working properly- in the debugger I get 404 error loading 'screen.css', but it finds bootstrap properly.

In base.htm, which all templates extend:

{% 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="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
{% endblock %}

In settings.py:

INSTALLED_APPS = (
    ...
    'bootstrapform',
    'djcompass',
)

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = '/media/'

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

STATIC_URL = '/static/'

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

SETTINGS_PATH = os.path.dirname(__file__)
PROJECT_PATH = os.path.join(SETTINGS_PATH, os.pardir)
PROJECT_PATH = os.path.abspath(PROJECT_PATH)

    os.path.realpath(os.path.dirname(__file__)) + '/templates/',
)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

in screen.scss:

@import "compass/reset";
@import "partials/weekly_schedule";

in _weekly_schedule.scss:

@import 'compass/css3/box-shadow';
@import 'compass/css3/box-sizing';

.tabbed-content-box{
    border-radius: 6px;
    padding: 16px 5px 5px 5px;
}
...etc...

In the template in question, weekly_schedule.htm:

{% extends 'base.htm' %}
{% load extras form_fields bootstrap %}

{% block body_block %}
    <form id="schedule_form" method="post" action="{% url 'owners:weekly_schedule' biz.slug %}"
            enctype="multipart/form-data">
        {% csrf_token %}

        {% for i in 7|get_range %}
            {% day_field day_dict i schedule_form %}
        {% endfor %}

<div style="clear;"></div>
<br/>

   <input type="submit" name="submit" value="Set schedule" />

    <button type="button" onclick="myFunction()">Try it</button>

{% endblock %}

In the past, my issue was in the importing of 'compass/css3' which made no sense, since I started a compass project. This is no longer griping at the moment. My screen.css seems to be compiling well, saying things like

/* line 93, ../sass/partials/_weekly_schedule.scss */
.faketestthingy {
  background-color: red;
}

after I make a fake entry. Most importantly, in config.rb, which is at the root level in the project (the place compass init put it) I have:

#http_path = "/home/myname/django_practice/scheduler_app"
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"

of which I have tried both http_paths, to no avail. I can't remember why I changed my PROJECT_PATH in the past (it was a static files thing) but I tried that without the absolute path as well. I tried changing all the media settings that had "static/staticfiles" to "stylesheets", and still 404 on screen.css. Any pointers greatly appreciated. Thank you enter image description here

sthzg sthzg · Accepted Answer · 2015-06-01T19:41:55

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.

Cannot find screen.css compass/sass in django project that is compiling correctly

1 Answers