css not loading in rails production environment

Question

I found through chrome dev tools that the custom.css.scss below wasn't being used in production. Does anyone know why heroku wouldn't use some scss?

my custom.css.scss for index page

/* Masters index */

.masters {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-top: 1px solid $grayLighter;
    &:last-child {
      border-bottom: 1px solid $grayLighter;
    }
  }
 }

development index page

production index page

Answer 1

In production mode, you have to run rake assets:precompile to serve up anything in your app/assets folder. In development, Rails constantly checks for updates to the files and serves them one-by-one.

This is great when you're developing, but is rather slow in production. So, to speed things up, Rails has you run a single, longer task that shrinks and combines a bunch of files in app/assets, speeding up page loading times and reducing server load.