rake assets:precompile heroku doesn't pick up

Question

Ahh, I am gettting headaches from this assets:precompile thing. When I first pushed app to heroku, I precomipled them locally. This was all good, but then it wouldn't pick up any changes to css files I made after that in development, because it served the precompiled assets. So now, for the visual things, I had to do rake assets:clean. I made the changes I wanted to app locally, without problems. Then, I precompiled assets again, and pushed the changes to heroku, but now it seems as it won't even see my assets.The page is just white with stuff on it, without any styling whatsoever.

Please help!

Answer 1

You're having problems with 2 parts of the heroku system:

---

Asset Fingerprinting

Asset fingerprinting basically adds an MD5 hash to the end of your asset files, to keep them unique & dependent of any relations they have in the file. It's important because each time you compile your assets, they generate these new filenames which will cause standard CSS to mess up

You need to do this with all of your asset references in your CSS:

Change your CSS files to .css.scss

Unlike static CSS, SCSS is compiled dynamically, and can parse ruby code. This means you can reference your assets like this:

background-url: asset_url('/nav_bar/nagivgation_bg.png');

Do this for your CSS files and the references should be okay

---

Serve Static Assets

Heroku needs you to run static assets in Rails. This is very simple to do:

#/config/environments/production.rb
config.serve_static_assets = true

---

Update

Here is some live code to demonstrate where to include dynamic helpers in the .scss file:

.confirmation .action_bar a.confirm {
        color: #fff;
        background: asset_url('modals/confirm_button/bg.png') top repeat-x;
        position: relative;
        margin: 0 0 0 7px;
}