Reputation: 2177

rails 3.2.1 stylesheet not loading?

I am reading the "agile web development with rails" book and ran into a problem at the end of chapter 6. Basically, what I have done so far is defined a sass stylesheet (products.css.scss) and linked it to my application in layouts/application.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body class='<%= controller.controller_name %>'>

<%= yield %>

</body>
</html>

but it doesn't load when i run the server and visit the page!

any idea why?

Upvotes: 1

Answers (6)

Gwahir

Reputation: 1

according to the documentation (http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/StylesheetTagHelpers/stylesheet_link_tag) you can set the tag to include all stylesheets in the stylesheets directory with stylesheet_link_tag :all There are also options for caching, recursion, and concatenation.

If you don't want to include everything but just the application.css and your controller's css you could do this:

= stylesheet_link_tag 'application', params[:controller].classify.downcase.pluralize

Upvotes: 0

user2239630

Reputation: 1

place the depot.css from /public/stylesheets/ to app/assets/stylesheets/

Upvotes: 0

richardun

Reputation: 713

Running the assets precompile command will compile as the user above mentioned... however, that might not be what you want to do unless you want to have to run that everytime you make a change and then add all of this to your SCM repo and then possibly have issues in production.

The real solution to this exact example is that the doesn't have the "products" class in it, so the products.css.scss isn't picked up. See this post which helped me understand this: https://stackoverflow.com/a/10080134

Upvotes: 0

Kirka121

Reputation: 505

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.

Upvotes: 2