css - How do I use Controller specific stylesheets in Rails 3.2.1?

Question

Using Rails 3.2.1

---

I created a simple controller called Home using the command:

rails g controller Home index

And it created a new controller and view for me:

Notice how there are two stylesheets, one "Application" and one "Home". I can't find any documentation to support this assumption but I'm guessing you put styles that will only be applied to the "Home" views, in the Home.css.scss file, correct?

So as a test, I added in some global styles to Application.css.scss.erb and ran the application.

The styles applied as expected.

Next, I added in some rules to the Home.css.scss file and I visited a "Home/index" view, yet the style in that file wasn't attached, neither as a seperate CSS reference link, or even appended to the single Application.css.scss file. This is highly confusing to me, since the comments say:

// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

Why aren't the rules written in Home.css.scss applied to my website?

Answer 1

It can work this way and Marek is quite correct, the answer is in the guide. In the introduction to section 2.1:

For example, if you generate a ProjectsController, Rails will also add a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

So to set your application up to load controller specific stylesheets:

First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.

Typically you'll see an entry like this:

 *= require_tree .

If you still want to load some common css files, you can move them to a subdirectory and do something like this:

 *= require_tree ./common

Second, In your application's layout add the suggested stylesheet_link_tag eg

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= stylesheet_link_tag params[:controller] %>

In this example we first load the application css file, we then load any css file that matches the current controller name.