如何在 Rails 3.1 中加载 CSS 框架？答案

【问题标题】：How does one load a CSS framework in Rails 3.1?如何在 Rails 3.1 中加载 CSS 框架？
【发布时间】：2011-09-01 04:23:04
【问题描述】：

我正在尝试将 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 文件的正确方法是什么？

目前，我在 app/assets/stylesheets/ 中有蓝图目录

我的 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 做些什么，以便它加载必要的蓝图文件吗？如果有，怎么做？

其次，我将如何提供某种条件来检查 IE8、加载 blueprint/ie.css？

编辑：

嗯，重新加载应用程序的网页。 Rails 3.1 包含蓝图文件。即使 css 文件位于文件夹中（在本例中为：app/assets/stylesheets/blueprint。）

这让我有两个问题

应该如何使用 SASS 应用 if lt IE 8 条件？
如何使用 SASS 加载打印格式的 css 文件（即 'print' %>）？

【问题讨论】：

有一个railscasts covers the first question
您可能应该将蓝图 css 内容放在 vendor/assets/stylesheets 中，而不是放在您的应用中，以确保首先加载它们并将它们分开。

标签： ruby-on-rails-3 blueprint-css asset-pipeline

【解决方案1】：

如果有人想知道我最后是怎么做到的。

我删除了

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

希望这对某人有所帮助。

【讨论】：

感谢您撰写本文！您的解决方案很有意义，并且确实帮助我使用 Blueprint 清理了一个旧应用程序！

【解决方案2】：

This blog 有我认为您正在寻找的解决方案（就像我一样）。

不要将blueprint 放在app/assets 中，因为它会被require_tree 吸收。不要把它放在public 上，因为那不是资产的去处。将其放入vendor/assets/stylesheets，然后将它们包含在您自己的application.css 之前的application.html.erb 中：

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

【讨论】：

谢谢！给别人的说明：Vendor是项目根目录下的文件夹，不要在App下创建。如果服务器没有在 vendor 下获取新复制的文件，请记住重新启动服务器。

【解决方案3】：

尽管 Rails 3.1 (RC) 允许使用 SASS 文件，但它并不强制这样做。 /public/stylesheets 中的文件仍然可以正常使用。

如果您希望激活 SASS 解析器（并使用新框架），请将您的 my_styles.css 重命名为 my_styles.css.scss 并将其放入 /app/assets/stylesheets 文件夹中。然后在取消注释掉其中的 require_self / require_tree 行后，仅将您的 application.css 包含在您的 application.erb.html 中。

有关更多信息，这是我在谷歌快速搜索后找到的博客：http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

至于 IE 8 的事情。 IE 有一个 bug 并不总是执行条件，所以试试

 <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> 

尝试重置解析器以执行规则有点麻烦

【讨论】：

但是不查看 app/assets/stylesheets/ 内部吗？如何在 /public/stylesheets 目录中加载 CSS 文件？
AFAIK，那个助手仍在 /public/stylesheets 中寻找，永远不会少，你总是可以用 stylesheet_link_tag('/public/stylesheets/application.css') 指定一个完整的路径，以防它在未来发生变化（这是一个我们正在谈论的候选版本，而不是稳定版本）
至少在候选发布版本中，它似乎没有在 /public/stylesheets 中查找，并且因为那应该是完整的网络路径，而不是文件系统，所以没有公开的方式为我调用这项工作是：stylesheet_link_tag '/stylesheets/blueprint/print', :media => 'print'
我实际上有更长的机会浏览 github 上 rails/rails 的 master 分支，据我所知，sprockets 函数并不意味着公开。就稳定性或发布状态而言，仅这个子包就有大约 10+/- 未解决的问题——我想说我们还差得很远。最终（在这里做一个明智的猜测），后端将在旧框架（/public/*）和新的 sprockets 框架（/assets/*）之间交换基于config.assets.enabled
我的建议：小心处理，如果你在 3.1 中使用边缘，那么 - 准备好使用边缘并且必须在 api 更改时修复自己的调用

【解决方案4】：

这是在 Rails 3.1 中使用“blueprint-rails”gem 的方法

添加“blueprint-rails”gem：

/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 之外的单独文件（并且默认情况下不包含在 require 'blueprint' 中）。所以我们需要将它们添加到：

/Configuration/envoirnments/production.rb

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

然后运行：

bundle exec rake assets:precompile

【讨论】：

【解决方案5】：

另一种做事方式：

制作app/assets/stylesheets/custom.css

然后更改 custom.css 以使用所需的文件：

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

最后更改布局中的链接标签（确保删除“应用程序”样式表）

= 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)

【讨论】：

这种格式+1。一种在特定布局中包含样式表组的优雅方式。完美运行。

【解决方案6】：

完全同意你的解决方案，不要认为“require_tree”是application.css中的好习惯，它会包含任何东西，显然它太激进了。苦苦挣扎了一阵子，最后还是选择了完全相同的解决方案，使用应用程序来包含那些脚手架样式，然后使用 HTML 标签来包含一些可选和条件样式。谢谢。

【讨论】：

如果您没有提供实际答案，请使用“添加评论”。

【解决方案7】：

翻译后的 SASS 文件的最终结果实际上是 css 文件，因此它不应该改变您包含样式表的方式。

此外，仅仅因为启用了 SASS gem 并不意味着您不能同时使用普通的 vanilla css 文件。因此，包含蓝图 css 文件应该没有问题。

但是，如果您想纯粹使用 SASS，我建议您查看 compass gem，它对蓝图有很好的支持：

http://compass-style.org/

它还包含对特定于 ie 的样式表和宏的支持。

【讨论】：