Hosting SASS (or any dynamically generated asset) on Heroku can be a challenge, as most of the libraries that generate browser-ready versions of these assets expect to have write access to the filesystem.
There are a variety of libraries that provide asset compiling and caching, and some of these offer ways to do this in a Heroku-friendly way (usually by leveraging Varnish. But sometimes you don't want to install and learn how to use a new asset packaging library just to get a 100 line Sinatra app up and running IN THE CLOUD.
Heroku provides official instructions for using SASS on their platform, but like a lot of their documentation, it is Rails-specific. So here are the official instructions, converted for use with Sinatra (or I imagine, most Rack apps):
require 'sinatra' require 'sass/plugin/rack' use Sass::Plugin::Rack configure :production do use Rack::Static, urls: ['/stylesheets'], root: File.expand_path('../tmp', __FILE__) Sass::Plugin.options.merge!(template_location: 'public/stylesheets/sass', css_location: 'tmp/stylesheets') end get '/' do # your app here end
- This assumes that the Sinatra app is in the root directory of the project, and that all SASS files live at
- Don't forget to add
.gitignoreto help prevent checking generated CSS files into git during development.
- No files will be served from
public/stylesheetsin production, so make sure all stylesheets are in the
sassdirectory. For CSS resets and the like, change their extensions to
scssand drop them into the