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="http://www.vinta.com.br">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="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 <strong>README.md</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>settings.py</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="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.</strong> They fix issues from <strong>django-compressor</strong>.</p><p>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.</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="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.</p><p>Follow us on Twitter to keep updated: <a href="https://twitter.com/vintasoftware">@vintasoftware</a>. Thanks!</p>
Join the Tech Forward newsletter
Stay ahead of the curve with our latest trends about web development.
By clicking “Accept all”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage and assist in our marketing efforts. Check our privacy policies.