How to configure Sass and Bower with django-compressor - part 1 (local config)
Flávio Juvenal • 13 April 2015
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.
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.
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', )
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!