SASS support using django compressor

Follow this guide to add SASS support with autoprefix.

Add the following to requirements/common.txt:

# Static files
# -------------------------------------
django-compressor==2.0
django-libsass==0.7
django-compressor-autoprefixer==0.1.0

Create a package.json file at root folder with following content:

{
  "name": "django-compressor-helpers",
  "version": "0.1.0",
  "description": "Installs commandline tools needed by django-compressor for post-processing of css/js.",
  "engines": {
    "node": "5.11.0"
  },
  "dependencies": {
    "autoprefixer": "^6.1.1",
    "postcss-cli": "^2.3.2"
  }
}

INSTALLED_APPS += ('compressor', )

COMPRESS_CSS_FILTERS = [
    'django_compressor_autoprefixer.AutoprefixerFilter',
    'compressor.filters.cssmin.CSSMinFilter',
]

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

COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'django_libsass.SassCompiler'),
)

COMPRESS_ENABLED = True

Add the following to settings/production.py:

# Compress static files offline
# http://django-compressor.readthedocs.org/en/latest/settings/#django.conf.settings.COMPRESS_OFFLINE
COMPRESS_STORAGE = 'compressor.storage.GzipCompressorFileStorage'
COMPRESS_OFFLINE = True

Edit base.html to add:

{% load compress %}

...

{% compress css %}
<link href="{% static 'css/main.scss' %}"  type="text/x-scss" rel="stylesheet">
{% endcompress %}

...

{% compress js %}
<script src="{% static 'js/main.js' %}"></script>
{% endcompress %}

And rename the static/css/main.css to static/css/main.scss.

Update wsgi.py integrate django-compressor with whitenoise:

from whitenoise.django import DjangoWhiteNoise
# ...

class DjangoCompressorWhiteNoise(DjangoWhiteNoise):
    """A sub-class of DjangoWhiteNoise to play nice with django compressor.

    DjangoWhiteNoise by-default doesn't add forever caching headers on the files
    generated with django-compressor as it doen't treat them as immutable. See
    original implementation of `is_immutable_file` for more details.
    """

    def is_immutable_file(self, path, url):
        """Determine whether given URL represents an immutable file.

        Adds a rule to the default implementation so that all the files in the
        COMPRESS_OUTPUT_DIR are recognized as immutable as well.
        """
        is_immutable = super(DjangoCompressorWhiteNoise, self).is_immutable_file(path, url)
        if not is_immutable:
            from django.conf import settings
            if settings.COMPRESS_OUTPUT_DIR in url:
                return True
        return is_immutable

application = DjangoCompressorWhiteNoise(get_wsgi_application())

Heroku Support:

Add the following to bin/post_compile:

# Offline compression of staticfiles via django-compressor
python manage.py compress

Run the following to be able to

heroku buildpacks:set heroku/python --app=<heroku-app-name>
heroku buildpacks:add --index 1 heroku/nodejs --app=<heroku-app-name>