Link to stylesheet include shows up in the HTML, but styles don't get applied when Turbolinks is on?

Question

I'm building a big site, and would like to have a lot of controller specific css.

I would like to use turbolinks, but the controller specific styles are not applied when turbolinks loads a new page.

However, if I'm at the same page and click the "refresh" button, the styles are applied just fine. So the styles are in the HTML but they're not being applied because of the way turbolinks works.

In my layout template file I have this:

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

---

SIDE NOTE

In my application.css file I have

*= require_directory .

I understand I COULD change it to this:

*= require_tree .

To include all CSS and not have this problem, but this seems like a bad solution. I would like to prevent from using any solution that loads these styles site wide.

Answer 1

If you want controller-specific stylesheets, you can just include this in your application layout:

<%= stylesheet_link_tag controller_name, media: "all", "data-turbolinks-track" => true %>

In your application.css, don't call any controller-centric dependencies in your require manifest; treat the controller stylesheets & application stylesheet as independents

controller_name in Rails is a helper method which gives you the string of the controller's name:

Converts the class name from something like "OneModule::TwoModule::NeatController" to "neat".