2014-01-06 6 views
2

Как добавить пространства имен в css в проект рельсов.Css namespace in Rails

У меня есть 2 предопределенных файла css и 2 макета приложений, я бы хотел, чтобы первый использовал 1 css, а второй второй. Мои файлы css имеют стили для одних и тех же классов, поэтому все смешивается, если я не могу их каким-то образом отделить.

Один из моих контроллеров использует пространство имен admin. Я попытался скопировать 1-й css в папку администратора, но он не работает.

структура папок:

stylesheets\admin\screen.css 
      \styles.css 

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

--- UPDDATE ---

aplication.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 все стиль теряется.

ответ

2

В одном из ваших шаблонов приложений поместить -

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

и в другом сайте -

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

Если вы в конечном итоге вызова файла application.css в обоих шаблонов вы увидите что он звонит по всему дереву -

/* 
*= require_self 
*= require_tree . 
*/ 

Это делает вызов макета во всех существующих таблицах стилей. Вам просто нужно быть более конкретным в тех таблицах стилей, которые вы вызываете в свое приложение.

============== UPDATE ==============

Поскольку вы используете Rails 4 и HAML ваши замененные линии будут выглядеть как это -

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

и

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

соответствующий с соответствующим шаблоном, конечно.

============ ДРУГОЙ UPDATE ===========

Если у вас есть дополнительные таблицы стилей вы хотели бы включить в каждый из этих шаблонов вы можете включите их, разделив имена запятыми. Смотрите пример ниже -

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

так я должен заменить эти строки: = stylesheet_link_tag «приложение», средства массовой информации: «все», «данные-turbolinks-трек» => истинный с теми, которые вы написали? – LogofaT

+0

@LogofaT - проверить мой обновленный ответ –

+0

да, это именно то, что я пробовал, и если я удалю исходную строку, все css потеряно – LogofaT