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

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

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

  <%= 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?

В настоящее время у меня есть blueprint dir в app/assets/stylesheets/

мое приложение / активы/таблицы стилей / приложение.в 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 . 
*/

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

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

EDIT:

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

что оставляет мне два вопроса

  1. как применять если lt IE 8 условие с помощью SASS?
  2. как загрузить файл css для формата печати (т. е. 'print' %>) с помощью SASS?
26
asset-pipeline blueprint-css ruby-on-rails-3

7 ответов

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

если вы хотите активировать парсер SASS (и использовать новую структуру), переименуйте свой my_styles.css на my_styles.css.scss и поместите его в . Тогда включите только ваш 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]-->

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

6

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

Я убрал

 *= require_tree .

мой app / активы / таблицы стилей / приложения.в 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 / макеты / приложение.формат html.Эрб, Я:

<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]-->
...

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

24

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

не поставить blueprint на app/assets потому что он будет всасываться в require_tree. Не надевай его!--4--> потому что это не то, куда идут активы. Положите его в 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 %>
16

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

добавить "blueprint-rails" gem:

/Gemfile

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

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

/ app / активы / таблицы стилей / приложения.в CSS

 /*
  *= require 'blueprint'
  */

добавить приложение.css, который будет содержать общие файлы blueprint. Также добавьте печать.css и ie.стиль CSS условно:

/просмотров/макеты/приложения.формат html.Эрб

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

из-за печати conditionals.css и ie.css необходимы как отдельные файлы вне приложения.CSS (и не включены по умолчанию в проект требуется''). Поэтому нам нужно добавить их на:

/ конфигурация / envoirnments / производство.rb

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

Запустите:

bundle exec rake assets:precompile
5

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

сделать app / активы/таблицы стилей / пользовательские.в CSS

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

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

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

= stylesheet_link_tag    "custom"

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

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

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

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

2

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

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

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

http://compass-style.org/

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

-1