Django Pipeline, Heroku, and SASS

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!

Solution

OK, here's how I got this working using Compass to compile my SASS files.

Use multiple Heroku buildpacks - Heroku Buildpack Multi

Put the following in your .buildpacks file

https://github.com/heroku/heroku-buildpack-ruby.git
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-python.git

Create a Gemfile with compass and any other requirements you have. Here's mine:

source 'https://rubygems.org'

ruby '1.9.3'

gem 'bootstrap-sass'
gem 'compass'

Create a config.rb file. Here's mine. As you can see it, requires the bootstrap-sass that I included in my Gemfile:

# Require any additional compass plugins here.
require 'bootstrap-sass'

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "app_folder/static/css"
sass_dir = "app_folder/static/sass"
images_dir = "app_folder/static/images"

output_style = :compact

more details on config.rb can be found here

Install node packages (django-pipeline wants yuglify). You'll need a package.json file:

{
  "dependencies": {
    "yuglify": "0.1.4"
  },
  "engines": {
    "node": "0.10.x",
    "npm": "1.3.x"
  },
  "repository": {
    "type": "git",
    "url": "your repo url"
  }
}

almost ready...
when Heroku runs the ruby buildpack, it will look for a rake task called assets:precompile. So now you'll need to add a Rakefile with the following:
```
namespace 'assets' do
  desc 'Updates the stylesheets generated by Sass/Compass'
  task :precompile do
    print %x(compass compile --time)
  end
end
```
this will put compile your stylesheets. You need to make sure you set the output (back in config.rb) to the place that django-pipeline is looking for CSS files (shown in the original question).
You should get rid of this part in the original question as django-pipeline isn't compiling your SASS for you:
```
PIPELINE_COMPILERS = (
  'pipeline.compilers.sass.SASSCompiler',
)
```
That should be it! Deploys should just work now, and it didn't really add a significant amount of time to my deploy process.

All in all, it amounts to a lot of setup, but for me it was well worth it as I no longer have to commit compiled files into the repository, which was causing a lot of merge conflicts when working with branches and pull requests.

I would like to figure out how to do this using only two buildpacks (obviously only one would be ideal but I don't know if it's possible). The problem is trying to find binary paths so that pipeline can do it's thing when it doesn't find the defaults. I'm not sure if the reason I can't do this is because of how Heroku is installing things, or because there is a bug in django-pipeline, but right now this is good enough for me.

If you try this and it doesn't work for you, let me know, if I missed something I'm happy to make updates.