Page-specific CSS with Rails App [duplicate]

Question

I would like to test out two different interfaces for my Rails application. Ideally, I'd like to have two separate css files, one associated with each interface (e.g., new_interface.css and old_interface.css). I currently have two different partials for the interfaces, one called _new_interface.html.erb and one called _old_interface.html.erb. If I'd like to invoke the correct css file when a particular view is loaded, how would I do this? For example, if I load _new_interface.html.erb, I want it to load the new_interface.css file and ignore the old_interface.css file.

My application.css:

/*
*= require_tree
*/

Answer 1

This question seems to be aimed at what you need to do: Using Rails 3.1 assets pipeline to conditionally use certain css

In a nutshell, you need to reorganize your app/assets/stylesheet folder into some subdirectories and change your manifest files so that not everything gets bundled together at run time.

Then you can put some conditional logic in your view so that it loads the right css for the job. The content_for tag is probably going to be useful here. You could edit app/views/layouts/application.html.erb and include a line just after the other javascript <%= yield :view_specific_css %>. Then in your view file you can use

<% content_for :view_specific_css do %>
    <%= stylesheet_link_tag "whatever %>
<% end %>

Answer 2

You should keep them both as part of application.css and do the following

application.html.haml/erb

body{:class => @old_layout ? "old_layout" : "new_layout"}

Then when ever you are in an action that is off the old layout in your controller put

@old_layout = true

Then in your css files either prepend everything with body.old_layout or body.new_layout or use scss, a subset of sass, and rap your current css files like so

body.old_layout{
  #all your old layout css goes here, all but body statements of course
}

body.new_layout{
  #all your new layout css goes here, all but body statements of course
}

This way you keep things simple with one css file. And with a solution that easily allows you to switch over each controller action one at a time.