Heroku

How It Works
Paul Elliott

This article was contributed by Paul Elliott

Hashrocket is a premiere Ruby on Rails design & development shop, with offices in Chicago and Florida. They specialize in pair programming, test-driven development, user-centered design, and on-site training.

Using Sass on Heroku

Last Updated: 07 February 2012

css sass

This article applies to apps on the Aspen or Bamboo stacks. For the most recent stack, Cedar, see Rails 3.1 on Heroku Cedar.

Table of Contents

If you’d like to use Sass in your Heroku app, you’ll need to do some configuration - by default, Sass generates CSS files in public/stylesheets, which isn’t writable on Heroku.

Gems

The first step is to require the gem that you’ll need. In your Gemfile, add the following:

gem 'sass'

Configuration

Please note that if you use this technique, all stylesheet requests will be redirected to tmp – which means that any CSS files you leave in public/stylesheets will be ignored.

Next, you’ll need to direct Sass to save the generated files to tmp and tell Rails how to access them. In config/initializers/sass.rb:

Sass::Plugin.options.merge!(
  :template_location => 'public/stylesheets/sass',
  :css_location => 'tmp/stylesheets'
)

Rails.configuration.middleware.delete('Sass::Plugin::Rack')
Rails.configuration.middleware.insert_before('Rack::Sendfile', 'Sass::Plugin::Rack')

Rails.configuration.middleware.insert_before('Rack::Sendfile', 'Rack::Static',
    :urls => ['/stylesheets'],
    :root => "#{Rails.root}/tmp")

Start Using Sass

Once your configuration is complete, you’re free to start using Sass. For detailed instructions, check out the Sass documentation.