How to setup Gruntfile to use compass/sass on heroku?

Question

I've successfully set up my heroku app with the grunt buildpack. When I push my Node.js app to heroku it will run the appropriate grunt task.

What I'd like is to use the 'grunt-contrib-compass' package to compile my .scss files. But that requires the compass executable and I don't know how to get that.

I've checked the heroku documentation and have seen an outdated doc that describes setting up compass with ruby... but I haven't seen any recent documentation for setting it up with Node.js.

Any ideas?

Answer 1

This took a lot of figuring out, but I've finally managed to get it to work. What's needed is to get Ruby to install alongside your Node.js app, so you can install the appropriate gems. This gist was very helpful and more-or-less describes what I needed to do.

In summary, the process was:

• Create the files .buildpacks, Gemfile, and Gemfile.lock in the project directory, with the following contents:

.buildpacks

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

Gemfile

source "http://rubygems.org"
gem "sass"

Gemfile.lock

GEM
  remote: http://rubygems.org/
  specs:
    sass (3.4.5)

PLATFORMS
  ruby

DEPENDENCIES
  sass

nb. I'm only using Sass, not Compass, but I'm guessing all you'll need to do to get compass is just add gem "compass" to the Gemfile and, eg. compass (1.0.3) below sass in the Gemfile.lock.

• Add a multi buildpack to your app:

  heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

• Finally, push these out to Heroku, and Ruby and Sass should install alongside your Node.js app, allowing you to use sass-related grunt tasks.

Answer 2

There is a forked-fork that includes compass installation. That might help:

https://github.com/stephanmelzer/heroku-buildpack-nodejs-grunt-compass

Answer 3

I got my app working on heroku using grunt-sass instead of grunt-contrib-sass. To swap them out just do npm install --save grunt-sass and then swap out the grunt-task wherever it's used (e.g. grunt.loadNpmTasks('grunt-sass') instead of grunt.loadNpmTasks('grunt-contrib-sass')