Rails 中的 CSS 命名空间

Question

如何将命名空间添加到 Rails 元素中的 css。

我有 2 个预定义的 css 文件和 2 个应用程序布局，我希望第一个使用 1 个 css，另一个使用第二个。我的 css 文件具有相同类的样式，因此如果我无法以某种方式将它们分开，事情就会变得困惑。

我的一个 Controller 使用管理命名空间。 我尝试将第一个 css 复制到管理文件夹中，但似乎不起作用。

文件夹结构:

stylesheets\admin\screen.css
           \styles.css

views\layouts\application.html.haml 
             \aplication2.html.haml

---更新---

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

如果我将 = stylesheet_link_tag "application", media: "all", "data-turbolinks-track"=> true 更改为 = stylesheet_link_tag "admin/screen.css", media : "all", "data-turbolinks-track"=> true 所有样式都会丢失。

Answer 1

在您的应用程序模板之一中放入 --

<%= stylesheet_link_tag    "admin/screen", :media => "all" %>

换句话来说——

<%= stylesheet_link_tag    "styles", :media => "all" %>

如果您最终在两个模板中调用 application.css 文件，您将看到它在整个树中调用 --

/*
 *= require_self
 *= require_tree .
*/

这使得在每个现有样式表中进行布局调用。您只需要更具体地说明在应用程序中调用哪些样式表即可。

==============更新==============

由于您使用的是 Rails 4 和 HAML，您替换的行将如下所示 --

= stylesheet_link_tag "admin/screen", media: "all", "data-turbolinks-track" => true

和

= stylesheet_link_tag "styles", media: "all", "data-turbolinks-track" => true

当然，与正确的模板相对应。

============另一个更新===========

假设您希望在每个模板中包含其他样式表，则可以通过用逗号分隔名称来包含它们。请参阅下面的示例 --

= stylesheet_link_tag "styles", "another-stylesheet", "and-another-one" media: "all", "data-turbolinks-track" => true