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?
DHH has a great introduction during his keynote for RailsConf. The Rails asset pipeline provides an assets:precompile rake task to allow assets to be compiled and cached up front rather than compiled every time the app boots. There are two ways you can use the asset pipeline on Heroku.
Compiling assets during slug compilation. If a public/assets/manifest.yml is detected in your app, Heroku will assume you are handling asset compilation yourself and will not attempt to compile your assets. Rails 4 uses a file called public/assets/manifest-<md5 hash>.json instead.
Heroku allows you to run commands in a one-off dyno - scripts and applications that only need to be executed when needed - using the heroku run command. Use this to launch a Rails console process attached to your local terminal for experimenting in your app’s environment:
Heroku recommends using the asset pipeline with a CDN to increase end user experience and decrease load on your Heroku app. If you are using Rails 4 and the asset pipeline it is recommended to familiarize yourself with the document below.
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.
Tested this and it did not work for me (adding config.serve_static_assets = true to production.rb)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With