Django Pipeline, Heroku, and SASS

Question

I've been trying to get django-pipeline setup so that I can compile and concat my assets. I would also like to remove the compiled css files from my repository to avoid merge conflicts in pull requests.

I've been trying to get django-pipeline to compile the files as part of the deploy process but can't figure this out. I use SASS to write my CSS. My pipeline settings look like this:

STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'

PIPELINE_CSS = {
    'main': {
        'source_filenames': (
            'sass/blah.scss',
            'sass/main.scss',
        ),
        'output_filename': 'css/main.css',
        'extra_context': {
            'media': 'screen',
        },
    },
}

PIPELINE_COMPILERS = (
  'pipeline.compilers.sass.SASSCompiler',
)

This works great locally, and generates .css files in my /sass folder, which are then combined to make the main.css file. If I check those CSS files into my git repository and push to Heroku, it also works fine. However, if I ignore them, which I would like to do so that I'm not committing compiled files, then django-pipeline can't find the files to combine. I'm not sure how I can get the sass compilation working on Heroku and I can't find anything about it.

I can provide more information about my setup if needed, hopefully somebody knows something about this!

user_544059 · Answer

You can use the libsass compiler for django-pipeline that uses Sass packaged as a Python package:

pip install libsasscompiler

Update your config:

PIPELINE['COMPILERS'] = (
  'libsasscompiler.LibSassCompiler',
)

The default Yuglify compressor is also a problem on Heroku, which you can temporarily overcome by disabling it. This is my config for enabling Sass on Django for example:

PIPELINE = {
    'COMPILERS': (
        'libsasscompiler.LibSassCompiler',
    ),
    'STYLESHEETS': {
        'main': {
            'source_filenames': (
              'styles/main.scss',
            ),
            'output_filename': 'css/main.css'
        },
    },
    # disable the default Yuglify compressor not available on Heroku
    'CSS_COMPRESSOR': 'pipeline.compressors.NoopCompressor',
    'JS_COMPRESSOR': 'pipeline.compressors.NoopCompressor'
}

The longer-term solution would be to move towards a JS-only build toolchain (as most projects are doing). Rails integrates pretty nicely with Webpack for example and is maintained by the same team. Until that happens in Django (if ever) and trickles into the Heroku Python builpack, you can use Heroku's multiple buildpacks and add an official Node buildpack step that runs npm install; npm run build for you.

Django Pipeline, Heroku, and SASS

4 Answers