<!DOCTYPE html><html><head> <title>OrgoDojo</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= yield(:head) %> <%= yield(:chapters) %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>
<%= yield %> <%= render 'layouts/footer_below' %>
</body></html>
<% content_for(:chapters) do %> <%= stylesheet_link_tag 'chapters' , :media => "all" %> <% end %>
<%= render 'pages/chapters_header' %>
<h1> This is chapter 1</h1><p> Hello Hello </p>
<% content_for(:head) do %> <%= stylesheet_link_tag 'custom' , :media => "all" %> <% end %>
<%= render 'layouts/header' %><%= render 'layouts/welcome_section' %><%= render 'layouts/benefits_section' %><%= render 'layouts/footer_above' %>
I have a landing page and chapter1 page. The landing view is linked to one stylesheet. The chapter1 view is linked to another stylesheet. When I go to the home page the correct CSS is applied but when I click to my next page, the CSS form the landing view is being applied to the chapter1 view. When I refresh the chapter1 view, the correct CSS is applied but then when I click back to the home page, the chapter1 CSS is being applied to the landing view. I suspect my pages are rendering both stylesheets. How do I prevent this? How do I select which stylesheets are rendered for the views?