Is there a way to add namespaces to CSS within a Rails project?
I have two pre-defined CSS files and two application layouts. I want the first layout to use one CSS file, and the second layout to use the other. However, both CSS files have styles for the same classes, causing things to become mixed up if not separated properly.
One of my controllers uses an admin namespace. I attempted to copy the first CSS file into an admin folder, but it did not work as expected.
Folder Structure:
stylesheets\admin\screen.css
\styles.css
views\layouts\application.html.haml
\aplication2.html.haml
---UPDATE---
application.html.haml :
%html
%head
%title Page
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true
= csrf_meta_tags
= favicon_link_tag 'favicon.ico'
%body
.wrapper
.page
.header-container
.header
.quick-access
%form#search_mini_form{action: "product_list.html", method: "get"}
.form-search
%label{for: "search"} Search:
%input#search.input-text{maxlength: "128", name: "q", type: "text", value: ""}/
%button.button{title: "Search", type: "submit"}
%span
%span Search
%p.welcome-msg Default welcome msg!
%ul.links
%li.first
%a{href: "dashboard.html", title: "My Account"} My Account
%li
%a.top-link-cart{href: "cart.html", title: "My Cart"} My Cart
%li.last
%a.top-link-checkout{href: "checkout.html", title: "Checkout"} Checkout
.nav-container
%ul#nav
- @categories.each do |cat|
%li.level0.nav-1.level-top.first
%a.level-top{href: "#"}
%span=cat.label
= yield
.col-left.sidebar
.col-right.sidebar
.block.block-cart
.block-title
%strong
%span My Cart
.block-content
%p.empty You have no items in your shopping cart.
.footer-container
.footer
%ul
%li
%a{href: "#"} About Us
%li
%a{href: "#"} Customer Service
%li.last.privacy
%a{href: "#"} Privacy Policy
%ul.links
%li.first
%a{href: "#", title: "Site Map"} Site Map
%li
%a{href: "#", title: "Search Terms"} Search Terms
%li
%a{href: "#", title: "Orders and Returns"} Orders and Returns
%li.last
%a{href: "#", title: "Contact Us"} Contact Us
If I modify
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
to = stylesheet_link_tag "admin/screen.css", media: "all", "data-turbolinks-track" => true
, all styles are lost.