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

Flávio Juvenal
April 13, 2015
<p>This is a quick guide on how to configure a <strong>Django 1.8</strong> project with <strong>Sass</strong> (django-libsass), <strong>Bower</strong> (django-bower) and <strong>django-compressor</strong> (which combine static files and minificate them). This is the frontend setup we use in projects at <a href="">Vinta Software</a>.</p><h2 id="why">Why?</h2><p>With <strong>Sass</strong> integrated with <strong>django-compressor</strong>, you don't need to run <strong>sass</strong> in the command line. And with <strong>django-bower</strong> you don't need to keep frontend libraries in your code repository.</p><h2 id="how">How?</h2><p>The best way to learn is by example. So refer to the working example in <strong>GitHub</strong>: <a href=""></a>. To run the example, follow the instructions in its <strong></strong>.</p><h2 id="how-to-do-it-in-your-existing-django-project">How to do it in your existing Django project</h2><p>Follow the steps below:</p><p>1 - Install the dependencies with pip:</p><pre><code>pip install django-compressor django-bower django-libsass </code></pre><p>2 - Edit your <strong></strong> according to the following:</p><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><p><strong>Note that <code>sample_app.compressor_filters.PatchedSCSSCompiler</code> and <code>sample_app.compressor_filters.CustomCssAbsoluteFilter</code> are custom classes available at <a href=""></a>. Copy them to your project.</strong> They fix issues from <strong>django-compressor</strong>.</p><p>Please refer the <a href="">working example project</a> if you have any trouble. If you need additional help, please leave a comment below.</p><h2 id="what-about-deployment">What about deployment?</h2><p>Deploying this setup to <strong>Heroku</strong> with <strong>S3</strong> is not an easy task since it requires multiple buildpacks and some additional configuration. But we can help you! <a href="">Click here to read the part 2</a> of this guide for a deployment tutorial.</p><p>Follow us on Twitter to keep updated: <a href="">@vintasoftware</a>. Thanks!</p>