Как загрузить фреймворк CSS в Rails 3.1?

Я пытаюсь загрузить структуру CSS Blueprint в свое приложение Rails 3.1.

В Rails 3.0+ у меня было бы что-то вроде этого в моих представлениях/макетах/application.html.erb:

  <%= stylesheet_link_tag 'blueprint/screen', 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->

Однако в Rails 3.1 теперь используется SASS. Как правильно загрузить эти CSS-файлы Blueprint?

В настоящее время у меня есть каталог чертежей в app/assets/stylesheets/

Мое приложение/активы/таблицы стилей/application.css выглядит так:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

Должен ли я что-то сделать с application.css, чтобы он загружал необходимые файлы Blueprint? Если да, то как?

Во-вторых, как мне предоставить какое-то условие для проверки IE8, чтобы загрузить blueprint/ie.css?

ИЗМЕНИТЬ:

Хммм, снова перезагружаю веб-страницу приложения. Rails 3.1 включает файлы Blueprint. Даже если файлы css находятся в папке (в данном случае: app/assets/stylesheets/blueprint.)

Что оставляет меня с двумя вопросами

  1. Как применить условие if lt IE 8 с помощью SASS?
  2. Как загрузить файл css для формата печати (например, ‹%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>) с помощью SASS?

ruby-on-rails-3 asset-pipeline blueprint-css
person Christian Fazzini    schedule 24.05.2011    source источник
comment
Есть рельсовые трансляции, в которых отвечает на первый вопрос   -  person DonaldSowell    schedule 24.05.2011
comment
Вероятно, вам следует поместить элементы css чертежей в vendor/assets/stylesheets, а не в ваше приложение, чтобы убедиться, что они загружены первыми, и разделить их.   -  person Fire Emblem    schedule 30.05.2011

Ответы (7)


arrow_upward
6
arrow_downward

Несмотря на то, что Rails 3.1 (RC) позволяет использовать файлы SASS, он не принуждает к этому. Файлы в вашем /public/stylesheets по-прежнему будут нормально обслуживаться.

Если вы хотите активировать парсер SASS (и использовать новую структуру), переименуйте свой my_styles.css в my_styles.css.scss и поместите его в папку /app/assets/stylesheets. Затем включите только свой application.css в свой application.erb.html после раскомментирования в нем строк require_self / require_tree.

Для получения дополнительной информации, вот блог, который я нашел после быстрого поиска в Google: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

Что касается IE 8. В IE была ошибка, не всегда выполняющая условия, так что попробуйте

<!--[if IE 8.000]><!--> <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> <!--<![endif]-->

это немного хакерства, чтобы попытаться сбросить парсер для выполнения правила

person colinross    schedule 24.05.2011
comment
Но разве ‹%= stylesheet_link_tag %› не заглядывает внутрь app/assets/stylesheets/? Как можно загрузить файлы CSS в каталог /public/stylesheets? - person Christian Fazzini; 24.05.2011
comment
Насколько я знаю, этот помощник все еще ищет в /public/stylesheets, тем не менее, вы всегда можете указать полный путь с помощью stylesheet_link_tag('/public/stylesheets/application.css') на случай, если он изменится в будущем (это кандидат на выпуск, о котором мы говорим, а не стабильный выпуск) - person colinross; 24.05.2011
comment
По крайней мере, в кандидате на выпуск он, похоже, не просматривает /public/stylesheets, и, поскольку это должен быть полный веб-путь, а не файловая система, поэтому нет общедоступности, способ вызвать эту работу для меня: stylesheet_link_tag '/stylesheets/blueprint/print', :media => 'print' - person jrduncans; 29.05.2011
comment
На самом деле у меня больше шансов просмотреть основную ветку rails/rails на github, и, насколько я могу судить, функции sprockets не предназначены для публичного доступа. Только у этого подпакета есть около 10+/- нерешенных проблем, так что, что касается стабильности или состояния выпуска, я бы сказал, что мы все еще довольно далеки от этого. В конце концов (сделав здесь разумное предположение), серверная часть переключится между устаревшей структурой (/public/*) и новой структурой sprockets (/assets/*) на основе config.assets.enabled. - person colinross; 01.06.2011
comment
Мое предложение: обращайтесь с осторожностью, и если вы используете край с 3.1, что ж, будьте готовы использовать край и должны исправлять свои собственные вызовы при изменении API. - person colinross; 01.06.2011

arrow_upward
24
arrow_downward

Если кому-то еще интересно, как я это сделал в конце.

Я удалил

 *= require_tree .

Мое app/assets/stylesheets/application.css теперь выглядит так:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require 'blueprint/screen'
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

И в app/views/layouts/application.html.erb у меня есть:

<html>
<head>
  <title><%= yield(:title).present? ? yield(:title) : 'Foobar' %></title>
  <%= favicon_link_tag %>

  <%= stylesheet_link_tag    'application' %>
  <%= javascript_include_tag 'application' %>

  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->
...

Надеюсь, это поможет кому-то.

person Christian Fazzini    schedule 08.06.2011
comment
Спасибо, что написали это! Ваши решения имеют большой смысл и действительно помогли мне очистить старое приложение с помощью Blueprint! - person Dave Collins; 23.10.2012

arrow_upward
16
arrow_downward

В этом блоге есть решение, которое я думаю вы ищете (как я был).

Не помещайте blueprint в app/assets, потому что он будет поглощен require_tree. Не ставьте его на public, потому что активы идут не туда. Поместите его в vendor/assets/stylesheets, затем включите их в application.html.erb перед вашим собственным application.css как таковой:

<%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
<%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie', :media => "screen, projection" %><![endif]-->
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
person Turadg    schedule 05.08.2011
comment
Спасибо! Примечание для других: Vendor — это папка в корне проекта, не создавайте ее в App. Также не забудьте перезапустить сервер, если он не получает только что скопированные файлы под поставщиком. - person Amin Ariana; 29.12.2011

arrow_upward
5
arrow_downward

Вот как можно использовать гем blueprint-rails в Rails 3.1.

Добавьте гем blueprint-rails:

/Gemfile

gem 'blueprint-rails', , '~> 0.1.2'

Добавьте общие файлы схемы в манифест, чтобы они были предварительно скомпилированы в application.css:

/app/assets/stylesheets/application.css

 /*
  *= require 'blueprint'
  */

Добавьте файл application.css, который будет содержать общие файлы схемы. Также добавьте print.css и ie.css условно:

/Views/layouts/application.html.erb

<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
<!--[if lt IE 8]>
  <%= stylesheet_link_tag 'blueprint/ie' %>
<![endif]-->

Из-за условий print.css и ie.css необходимы как отдельные файлы вне application.css (и не включены по умолчанию в требуемый «план»). Итак, нам нужно добавить их в:

/Configuration/envoirnments/production.rb

# Separate assets
config.assets.precompile += ['blueprint/print.css', 'blueprint/ie.css']

Затем запустите:

bundle exec rake assets:precompile
person wintersolutions    schedule 24.01.2012

arrow_upward
5
arrow_downward

Другой способ делать вещи:

Создайте app/assets/stylesheets/custom.css

Затем измените custom.css, чтобы использовать необходимые файлы:

/*
 *= require_self
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

Наконец, измените тег ссылки в макете (не забудьте удалить таблицу стилей «приложение»)

= stylesheet_link_tag    "custom"

Затем вы можете вручную добавить любую другую таблицу стилей (например, «т.е.») и другие группы таблиц стилей (например, чертеж для загрузки всех файлов чертежей...)

Вам также может понадобиться (в вашем production.rb)

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)
person montrealmike    schedule 29.06.2011
comment
+1 за этот формат. Элегантный способ включения групп таблиц стилей в определенный макет. Работал отлично. - person Jim Wrubel; 16.04.2012

arrow_upward
2
arrow_downward

Абсолютно согласен с вашим решением, не думайте, что «require_tree» - это хорошая практика в application.css, она будет включать что угодно, очевидно, это слишком агрессивно. Я некоторое время боролся, наконец, я выбрал точно такое же решение, использовал приложение для включения этих стилей каркаса, а затем использовал теги HTML для включения некоторых необязательных и условных стилей. Спасибо.

person Leon Guan    schedule 06.09.2011
comment
Пожалуйста, используйте комментарий, если вы не даете фактический ответ. - person Mac; 23.11.2011

arrow_upward
-1
arrow_downward

Конечным результатом переведенных файлов SASS на самом деле является файл css, поэтому он не должен влиять на то, как вы включаете свои таблицы стилей.

Кроме того, то, что гем SASS включен, не означает, что вы не можете одновременно использовать простые файлы vanilla css. Поэтому у вас не должно возникнуть проблем с включением файлов css чертежей.

Однако, если вы хотите использовать только SASS, я рекомендую проверить гем компаса, который имеет хорошую поддержку blueprint:

http://compass-style.org/

Он также содержит поддержку таблиц стилей и макросов, специфичных для ie.

person twmills    schedule 24.05.2011