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

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

26 голосов
/ 24 мая 2011

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

В Rails 3.0+ у меня было бы что-то подобное в моих views / layouts / 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?

В настоящее время у меня есть каталог dir в приложении / assets / stylesheets /

Мое приложение / 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?

EDIT:

Хммм, перезагрузите веб-страницу приложения снова. 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?

Ответы [ 7 ]

24 голосов
/ 08 июня 2011

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

Я удалил 

 *= require_tree .

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

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

16 голосов
/ 06 августа 2011

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

Не помещайте 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 %>
6 голосов
/ 24 мая 2011

Несмотря на то, что 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]-->

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

5 голосов
/ 24 января 2012

Вот как использовать гем '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
5 голосов
/ 29 июня 2011

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

Создание app / assets / stylesheets / custom.css

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

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

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

= stylesheet_link_tag    "custom"

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

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

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)
2 голосов
/ 06 сентября 2011

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

0 голосов
/ 24 мая 2011

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

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

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

http://compass -style.org /

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

...