Использование Rails 3.1 конвейера ресурсов для условного использования определенных CSS

166

Я нахожусь в процессе создания моего первого сольного Rails-приложения с использованием Rails 3.1.rc5. Моя проблема в том, что я хочу, чтобы мой сайт отображал различные CSS-файлы условно. Я использую Blueprint CSS и пытаюсь сделать рендеры звездочек / рельсов screen.cssбольшую часть времени, print.cssтолько при печати и ie.cssтолько при доступе к сайту из Internet Explorer.

К сожалению, команда по умолчанию *= require_treeв application.cssманифесте включает в себя все в assets/stylesheetsкаталоге и приводит к неприятному беспорядку CSS. Мой текущий обходной путь - это своего рода метод грубой силы, в котором я задаю все индивидуально:

В application.css:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

В моих таблицах стилей частично (хамл):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

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

Спасибо!

talon55
источник

Ответы:

223

Я нашел способ сделать его менее жестким и надежным в будущем, все еще используя конвейер ресурсов, но сгруппировав таблицы стилей. Это не намного проще, чем ваше решение, но это решение позволяет автоматически добавлять новые таблицы стилей без повторного редактирования всей структуры.

То, что вы хотите сделать, это использовать отдельные файлы манифеста, чтобы разбить вещи. Сначала вы должны реорганизовать вашу app/assets/stylesheetsпапку:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

Затем вы редактируете три файла манифеста:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

Затем вы обновите файл макета приложения:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

И наконец, не забудьте включить эти новые файлы манифеста в ваш config / environment / production.rb:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Обновить:

Как отметил Макс, если вы следуете этой структуре, вы должны помнить о ссылках на изображения. У вас есть несколько вариантов:

  1. Переместите изображения, чтобы следовать той же схеме
    • Обратите внимание, что это работает, только если изображения не являются общими
    • Я ожидаю, что это будет не стартер для большинства, так как это слишком усложняет вещи
  2. Укажите путь к изображению:
    • background: url('/assets/image.png');
  3. Используйте помощника SASS:
    • background: image-url('image.png');
gcastro
источник
1
Хотя это хорошая организация файлов, я считаю, что она по-прежнему решает существенную проблему так же, как и сам вопрос.
Семперос
@semperos, вы правы, что форма решения, по сути, такая же, но мое предложение по-прежнему позволяет нам использовать конвейер ресурсов для всей таблицы стилей. Я не уверен, есть ли другой способ выборочного включения части стилей, если это не отдельная таблица стилей. По крайней мере, так мы компилируем только несколько CSS-файлов.
gcastro
5
Примерно так в руководстве Rails Asset Pipeline было бы неплохо. спасибо
Башар Абдулла
3
Однако есть одна проблема: если вы следуете этой структуре и используете простые .cssфайлы, все ваши изображения будут повреждены. Например, background: url('image.png')будет переведен на путь /assets/all/image.png(обратите внимание на все на пути). Вместо этого работает: background: url('/assets/image.png). Если есть более простое решение, пожалуйста, опубликуйте его. Кроме использования SASS, у которого есть вспомогательные методы, которые, вероятно, разрешают путь правильно.
Макс
1
@ExiRe, да. Любые таблицы стилей или JS-файлы / манифесты, которые не соответствуют стандартному шаблону, необходимо добавить в массив прекомпиляции (см. Guides.rubyonrails.org/asset_pipeline.html#precompiling-assets )
gcastro
10

Наткнулся сегодня на эту проблему.

Закончилось помещением всех специфичных для IE таблиц стилей в lib / assets / stylesheets и созданием одного файла манифеста для каждой версии IE. Затем в application.rb добавьте их в список вещей для прекомпиляции:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

И в ваших макетах условно включите эти файлы манифеста, и все готово!

Энтони Альберто
источник