Why does a rails app on heroku serve assets via all.css and locally via individual files

Question

I'm a rails newbie, I've been trying to figure out what is going on with the stylesheets_link_tag on heroku.

If I use

= stylesheet_link_tag "style", :cache => true

heroku uses "all.css" and does not pick up the stylesheet, but if I use

= stylesheet_link_tag "style", :cache => false

it serves the stylesheet using its name "style.css". Why?

Answer 1

This is the result of calling :cache => true on your stylesheet link tag.

:cache => true takes all of the stylesheets provided and concatenates them into one file called all.css.

The reason you're only seeing this on your Heroku deployment is because it calls the concatenated all.css only when the Rails application is running in production mode.

So for example let's say I have three stylesheets and I include them in my header:

= stylesheet_link_tag "application", "jquery-ui", "style", :cache => true

When in development, this will include application.css, jquery-ui.css, and style.css (in that order).

In production, it will concatenate all of the CSS from the three files (in the order provided) into one single file called "all.css", which will be the only CSS file included.

The benefit is making fewer HTTP requests in production and ideally a smaller file size for your included CSS, which should hopefully speed up page load.

Edit As Casper points out in the comments, Heroku has a read-only filesystem. You might want to look at Heroku Asset Packager for a Heroku-specific solution.