CODEWITHSUNDEEP
cssruby-on-rails-3.2sassstylesheet
kakubei
kakubei

Reputation: 5400

Rails 3.2 using different CSS page for a few actions in controller (not the whole controller)

Here's the scenario:

Most of my pages use the CSS from different pages that gets compiled into one big CSS file as per default Rails, no problem there.

But I have a couple of pages that are actions in a controller which need to use a different CSS page and not the other ones at all. These are just about 3 actions in a controller that otherwise uses the main, default, compiled CSS.

In order to accomplish this, I call a specific layout for the actions that need the separate page:

  format.html { render :layout => 'doghouse_template' }

This doghouse_template has this call in it its head:

  = stylesheet_link_tag "doghouse_page"

This works fine in Development where pages are compiled on the fly if necessary but in Production, I get the following error:

ActionView::Template::Error (doghouse_page.css isn't precompiled)

This is because the doghouse_page.css is not compiled separately, it is compiled into the main application.css file, so of course, it doesn't exist in the public/assets folder.

I should also point out that doghouse.css is not really a CSS page but rather SCSS so I can't just copy it to public/assets without compilation of some type.

My question is, what is the solution here?

I can't use the application.css file for these, let's call them doghouse pages, because it messes the styling up and vice-versa.

I've even tried putting the file into application.rb:

config.assets.precompile += %w( doghouse_page.css.scss )

But doesn't make a difference. If, on the other hand, I put:

config.assets.precompile += %w( *.css )

I get an error on precompile because of bootstrap/_accordion.scss file so I can't do that.

I've seen very similar questions here but they tend to apply to using different CSS for a whole controller and nowhere does it specify how not to compile all the pages into one.

Please note that I do not want to separate all the CSS pages (that would ostensibly be one solution), just this one separate page.

Thanks.

Upvotes: 0

Views: 391

Answers (1)

Philip Hallstrom
Philip Hallstrom

Reputation: 19879

You should be able to just do this (note, the lack of .scss, even though doghouse_page.css.scss is your file):

config.assets.precompile += %w( doghouse_page.css )

If you can, I'd consider doing this. It's worked well for me. Move doghouse_page.css.scss into an 'extra's folder. Then:

config.assets.precompile += %w( extras/*.css )

Then in your app/views/layout/application... file add classes to the body tag for the controller and action. The below is the HAML version of what I use in one of my projects. 

%body{:class => ["c-#{controller_name}", "a-#{action_name}", I18n.locale]}

Then, adjust doghouse_page.css.scss so that it's scoped under a body tag with the right controller/action classes.

In my case I usually just want to override some things or add some things and keep most of what is in application.css.scss. This might not work for you, but if it does, it's a fairly clean way to customize individual pages/actions.

Upvotes: 1

Related Questions