CODEWITHSUNDEEP
ruby-on-railslayoutruby-on-rails-4
karns
karns

Reputation: 5867

Avoid rendering a seperate layout's CSS file in rails 4 (conflicting stylesheets)

I have a 'welcome' controller. I want to use a separate layout for this controller called welcome.html.erb which I want to use ONLY welcome.css.scss - I got this working.

Now I have a 'pages' controller that uses the default application layout. However, this application layout, which uses application.css.scss, also renders my OTHER layout's css (welcome.css.scss). This results in all of my pages actions looking all screwed up because my styles for the other layout are being applied.

welcome.html.erb (layout) css declaration

<%= stylesheet_link_tag 'welcome', media: 'all', 'data-turbolinks' => true %>

My application.html.erb (layout) is still the default set up.

To summarize, when I load the pages controller I specify my pages layout, which in turn just uses the welcome.css.scss - all is good. I click on a link which brings me to the pages controller and BAM ... it loads all of my css files and the welcome.css.scss conflicts with the application.css.scss.

Some possible solutions:

I have been researching and experimenting for a while and I have resorted to S.O.

Thanks for any help.

Upvotes: 3

Views: 2524

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

Layouts

To further joshia.paling's answer, perhaps you'd be better looking into how layouts work - they basically alow you to define custom HTML for different parts of your app.

In the sense of calling a layout, you'll need to set it in the controller (the default is application):

#app/controllers/welcome_controller.rb
Class WelcomeController < ApplicationController
    layout "welcome"
end

This will call the layout located at #app/views/layouts/welcome.html.erb, in which you can reference the welcome assets only:

#app/views/layouts/welcome.html.erb
<%= stylesheet_link_tag 'welcome', media: 'all', 'data-turbolinks' => true %>

--

Manifest

As alluded to by joshua.paling, you'll then have to ensure you've excluded the welcome assets from your various asset pipeline manifests:

#app/assets/stylesheets/application.css
*= require x
*= require y

If you're going to do this, you'll need to add your welcome assets to your precompilation settings:

#config/environments/production.rb
config.assets.precompile += %w(welcome.css)

Upvotes: 3

joshua.paling
joshua.paling

Reputation: 13952

You've probably got a line up the top of application.css.scss, in the comments, like this:

*= require_tree .

That is requiring ALL the files in your stylesheets directory. You'll need to remove it, and include just the ones you want, one by one.

Upvotes: 4

Related Questions