Блог

Главная - Вопросы по программированию - Как загрузить CSS-фреймворк в Rails 3.1?

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

#ruby-on-rails-3 #blueprint-css #asset-pipeline

#ruby-on-rails-3 #blueprint-css #asset-конвейер

Вопрос:

Я пытаюсь загрузить 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. Каким был бы правильный способ загрузить эти файлы Blueprint 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?

Комментарии:

1. Есть railscasts, который охватывает первый вопрос

2. Вероятно, вам следует поместить материалы blueprint css в vendor / assets / stylesheets, а не в ваше приложение, чтобы убедиться, что они загружены первыми, и разделить их.

Ответ №1:

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

Я удалил

  *= require_tree .

Мое приложение / ресурсы / таблицы стилей / 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]-->
...

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

Комментарии:

1. Спасибо, что написали это! Ваши решения имеют большой смысл и действительно помогли мне очистить старое приложение с помощью Blueprint!

Ответ №2:

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

Не вставляйте 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 %>

Комментарии:

1. Спасибо! Примечание для других: Vendor — это папка в корне проекта, не создавайте ее в приложении. Также не забудьте перезапустить сервер, если он не принимает только что скопированные файлы от поставщика.

Ответ №3:

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

Если вы хотите активировать анализатор SASS (и использовать новый фреймворк), переименуйте свой my_styles.css в be 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]-->

попытка перезагрузить анализатор для выполнения правила требует небольшого взлома

Комментарии:

1. Но разве <%= stylesheet_link_tag %> не заглядывает внутрь приложения /assets / stylesheets /? Как можно загрузить CSS-файлы в каталог /public / stylesheets?

2. AFAIK, этот помощник все еще ищет в / public / stylesheets, тем не менее, вы всегда можете указать полный путь с помощью stylesheet_link_tag('/public/stylesheets/application.css') на случай, если он изменится в будущем (мы говорим о кандидате на выпуск, а не о стабильной версии)

3. По крайней мере, в release candidate, похоже, он не отображается в / public / stylesheets , и поскольку это должен быть полный веб-путь, а не файловая система, то есть не общедоступный, способ вызвать эту работу для меня: stylesheet_link_tag '/stylesheets/blueprint/print', :media => 'print'

4. На самом деле у меня появился более длительный шанс просмотреть основную ветку rails / rails на github, и, насколько я могу судить, sprockets функции не предназначены для публикации. Только в этом подпакете около 10 / — нерешенных проблем, что касается стабильности или состояния выпуска — я бы сказал, что мы все еще довольно далеки. В конечном итоге (делая разумное предположение здесь), серверная часть поменяется местами между устаревшим фреймворком (/ public / *) и новым фреймворком sprockets (/ assets / *) на основе config.assets.enabled

5. Мое предложение: обращайтесь с ним осторожно, и если вы используете edge с 3.1, что ж, будьте готовы использовать edge и исправлять свои собственные вызовы при изменении API

Ответ №4:

Вот как использовать драгоценный камень ‘blueprint-rails’ в Rails 3.1

Добавьте драгоценный камень ‘blueprint-rails’:

/Gemfile

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

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

/приложение / ресурсы / таблицы стилей/application.css

  /*
  *= require 'blueprint'
  */

Добавьте application.css, который будет содержать общие файлы blueprint. Также добавьте 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 (и по умолчанию не включены в требуемый ‘blueprint’). Итак, нам нужно добавить их в:

/Configuration/envoirnments/production.rb

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

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

 bundle exec rake assets:precompile

Ответ №5:

Другой способ выполнения задач:

Создайте приложение / ресурсы / таблицы стилей /custom.css

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

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

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

 = stylesheet_link_tag    "custom"

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

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

   # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile  = %w(custom.css)

Комментарии:

1. 1 для этого формата. Элегантный способ включения групп таблиц стилей в определенный макет. Сработало отлично.

Ответ №6:

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

Комментарии:

1. Пожалуйста, используйте «добавить комментарий», если вы не предоставляете фактического ответа.

Ответ №7:

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

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

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

http://compass-style.org/

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