Question

I am learning Rails from “Agile Web Development With Rails” (4th edition, Rails 3) and I am having trouble getting a stylesheet to apply. To quickly take you through what I have done so far, I first generated a scaffold:

 rails generate scaffold Product title:string description:text image_url:string price:decimal

Then of course:

 rake db:migrate

I then used the db/seeds.rb file to load some data into the products table. When I loaded localhost:3000/products, everything was working great. Now, I copied the stylesheet code the book provides to the products.css.scss file generated by the scaffold:

.products {
  table {
    border-collapse: collapse;
  }
  table tr td {
    padding: 5px;
    vertical-align: top;
  }
 .list_image {
    width:  60px;
    height: 70px;
  }
  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }
    dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }
    dd {
      margin: 0;
    }
  }
  .list_actions {
     font-size:    x-small;
     text-align:   right;
     padding-left: 1em;
  }
  .list_line_even {
    background:   #e0f8f8;
  }
  .list_line_odd {
    background:   #f8b0f8;
  }
}

Now, when I load localhost:3000/products, the stylesheet is not being applied.I can see the stylesheet in inspect element, but it is not applying. I have tried everything imaginable. Firstly, I made sure this line of code was in my application.html.erb:

  <%= stylesheet_link_tag "application", :media => "all" %>

Given that my new stylesheet (products.css.scss) is in the assets/stylesheets/ directory, it should be loaded. When I inspect element on localhost:3000/products, I actually see the stylesheet there, but it is not being applied. the next thing I tried was running:

rake assets:precompile

No success. After deleting the public/assets directory, I made sure this line of code was in my config/application.rb file:

 config.assets.enabled = true

It was. Next, I headed over to my assets/stylesheet/application.css file and tried adding this line of code:

*= require products

Once again, no success. Lastly, I tried restarting my server to see if there was an effect. Failure again. I am at dead end here. Please, I would appreciate any and all input on this matter as I am so burnt-out and frustrated with this matter.

Answer 1

i just spent an hour figuring out the answer, since been having the exact same issue myself. go to your application.css.sass and make sure it has

/* ...
*= require_self
*= require_tree .
*/

in it. this auto loads all the other .css.sass in apps/assets/stylesheets, then precompiles them into public/assets/stylesheets to be 1 statis css file, and that is being served to your browser.