Show a different style sheet depending on page in rails 4

Question

I am trying to render different CSS depending on the page. I did some research How does one load a CSS framework in Rails 3.1? https://github.com/rails/rails/issues/1981 and of course the rails guide on the asset pipeline. What I want is for the index(home page) to render one css file(welcome.css.scss) and the others to render users.css.scss.

Right now when you navigate to the page it renders the welcome.css.scss and then when I hit sign in it is still rendering welcome.css.scss. But after refreshing the page it will then render the user.css.scss

I updated my assets.rb file:

Rails.application.config.assets.precompile += %w( welcome.css )
Rails.application.config.assets.precompile += %w( users.css )

Then I created a welcome.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Blocmarks</title>
    <%= stylesheet_link_tag    "welcome" %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>  
    <%= yield %>
  </body>
</html>

and a users.html.erb file

<!DOCTYPE html>
<html>
  <head>
    <title>Blocmarks</title>
    <%= stylesheet_link_tag    'users' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

I removed the require from the application.css.scss. The only thing in the file at this time is @import 'bootstrap'; and of course I have a welcome and a user.css.scss.

Results from the console: -Navigate to the home page

Started GET "/" for 127.0.0.1 at 2014-10-25 13:04:11 -0500
  ActiveRecord::SchemaMigration Load (0.3ms)  SELECT "schema_migrations".* FROM "schema_migrations"
Processing by WelcomeController#index as HTML
  Rendered welcome/index.html.erb within layouts/welcome (13.0ms)
Completed 200 OK in 471ms (Views: 446.7ms | ActiveRecord: 0.0ms)

Navigate to the users/sign-in

Started GET "/users/sign_up" for 127.0.0.1 at 2014-10-25 13:04:57 -0500
Processing by Devise::RegistrationsController#new as HTML
  Rendered devise/shared/_links.erb (2.7ms)
  Rendered devise/registrations/new.html.erb within layouts/devise (615.4ms)
Completed 200 OK in 896ms (Views: 890.9ms | ActiveRecord: 0.9ms)

Refresh the users/sign page:

Started GET "/users/sign_up" for 127.0.0.1 at 2014-10-25 13:06:02 -0500
Processing by Devise::RegistrationsController#new as HTML
  Rendered devise/shared/_links.erb (0.8ms)
  Rendered devise/registrations/new.html.erb within layouts/devise (7.4ms)
Completed 200 OK in 308ms (Views: 306.3ms | ActiveRecord: 0.0ms)

I also created a gist with the full console results to show what it is GETting first: https://gist.github.com/tjperry07/b3093c0b7f16b5e000b0

score 6 · Accepted Answer · answered Oct 25 '14 at 18:22

This is happening because of rails turbolinks. It makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.

If you look at guides or turbolinks docs. It's clearly stated that

If using the turbolinks gem, which is included by default in Rails 4, then include the 'data-turbolinks-track' option which causes turbolinks to check if an asset has been updated and if so loads it into the page

FIX:

Replace your stylesheet tags with these:

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

Show a different style sheet depending on page in rails 4

1 Answers1