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 <a href="http://www.vinta.com.br">Vinta Software</a>.<h2 id="why">Why?</h2>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.<h2 id="how">How?</h2>The best way to learn is by example. So refer to the working example in GitHub: <a href="https://github.com/vintasoftware/django-sass-bower-compressor-example">https://github.com/vintasoftware/django-sass-bower-compressor-example</a>. To run the example, follow the instructions in its README.md.<h2 id="how-to-do-it-in-your-existing-django-project">How to do it in your existing Django project</h2>Follow the steps below:1 - Install the dependencies with pip:<pre><code>pip install django-compressor django-bower django-libsass </code></pre>2 - Edit your settings.py according to the following:<pre><code class="language-python"># 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', ) </code></pre>Note that <code>sample_app.compressor_filters.PatchedSCSSCompiler</code> and <code>sample_app.compressor_filters.CustomCssAbsoluteFilter</code> are custom classes available at <a href="https://github.com/vintasoftware/django-sass-bower-compressor-example/blob/master/sample_app/compressor_filters.py">compressor_filters.py</a>. Copy them to your project. They fix issues from django-compressor.Please refer the <a href="https://github.com/vintasoftware/django-sass-bower-compressor-example">working example project</a> if you have any trouble. If you need additional help, please leave a comment below.<h2 id="what-about-deployment">What about deployment?</h2>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! <a href="http://www.vinta.com.br/blog/2015/how-to-configure-sass-and-bower-with-django-compressor-part-2.html">Click here to read the part 2</a> of this guide for a deployment tutorial.Follow us on Twitter to keep updated: <a href="https://twitter.com/vintasoftware">@vintasoftware</a>. Thanks!

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

Join the Tech Forward newsletter

Related articles

Our styled-components learning experience

PyGotham 19: Data Privacy, Feature Flags, Django + ElasticSearch and more!

Vinta at PythonBrasil 2022