Blog

Ideas and insights from our team

How to configure Sass and Bower with django-compressor - part 1 (local config)


This is a quick guide on how to configure a Django 1.8 project with Sass (django-libsass), Bower (django-bower) and django-compressor (which combine static files and minificate them). This is the frontend setup we use in projects at Vinta Software Studio.

Why?

With Sass integrated with django-compressor, you don't need to run sass in the command line. And with django-bower you don't need to keep frontend libraries in your code repository.

How?

The best way to learn is by example. So refer to the working example in GitHub: https://github.com/vintasoftware/django-sass-bower-compressor-example. To run the example, follow the instructions in its README.md.

How to do it in your existing Django project

Follow the steps below:

1 - Install the dependencies with pip:

pip install django-compressor django-bower django-libsass

2 - Edit your settings.py according to the following:

# 1. Add required apps.
INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'djangobower', # add this
    'compressor', # add this

    'sample_app', # here and below, your apps
)

# 2. Add Bower components directory.
# This directory will host your bower dependencies,
# so also add `/components/` to your .gitignore.
BOWER_COMPONENTS_ROOT = os.path.join(BASE_DIR, 'components')

# 3. Add STATIC_ROOT in case you don't have it yet.
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# 4. Add required finders.
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',

    'djangobower.finders.BowerFinder', # add this
    'compressor.finders.CompressorFinder', # add this
)

# 5. Add django-compressor configurations.
# Replace sample_app with your core app name.
COMPRESS_ENABLED = True
COMPRESS_URL = STATIC_URL

COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'sample_app.compressor_filters.PatchedSCSSCompiler'),
)

COMPRESS_CSS_FILTERS = (
    'sample_app.compressor_filters.CustomCssAbsoluteFilter',
)

# 6. Add some Bower package.
BOWER_INSTALLED_APPS = (
    'bootstrap-sass-official#3.3.1',
)

Note that sample_app.compressor_filters.PatchedSCSSCompiler and sample_app.compressor_filters.CustomCssAbsoluteFilter are custom classes available at compressor_filters.py. Copy them to your project. They fix issues from django-compressor.

Please refer the working example project if you have any trouble. If you need additional help, please leave a comment below.

What about deployment?

Deploying this setup to Heroku with S3 is not an easy task since it requires multiple buildpacks and some additional configuration. But we can help you! Click here to read the part 2 of this guide for a deployment tutorial.

Follow us on Twitter to keep updated: @vintasoftware. Thanks!

About Flávio Juvenal

Controversial software developer who questions everything: "Are we really going forward?". Python enthusiast, but is afraid JavaScript will conquer the world. Enjoys working with Django and now wants to write system checks for everything on it.

Comments