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

Question

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

ruby-on-rails-3blueprint-cssasset-pipeline

26

我正在尝试将CSS框架Blueprint加载到我的Rails 3.1应用程序中。

在Rails 3.0+中，我会在我的视图/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。那么正确的加载 Blueprint CSS 文件的方式是什么？

目前，我将 blueprint 文件夹放在 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中做一些事情，以便加载必要的Blueprint文件吗？如果是这样，怎么做？

其次，如何提供一些条件来检查IE8，以加载blueprint/ie.css？

编辑：

嗯，重新加载应用程序的网页。Rails 3.1包括Blueprint文件。即使css文件在文件夹中（在这种情况下：app/assets/stylesheets/blueprint）。

这让我有两个问题

如何使用SASS应用 if lt IE 8 条件？
如何使用SASS为打印格式加载CSS文件（即<%= stylesheet_link_tag 'blueprint/print'，'media' => 'print' % >）？

- Christian Fazzini

3

有一集 Railscasts 视频涵盖了第一个问题，链接如下：http://railscasts.com/episodes/265-rails-3-1-overview。 - DonaldSowell

3

为了确保先加载和分离样式，您应该将 Blueprint CSS 相关内容放在 vendor/assets/stylesheets 中，而不是您的应用程序中。 - Fire Emblem

7个回答

16

这篇博客里提供了我认为你正在寻找的解决方案（就像我当时一样）。

不要将 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 %>

- Turadg

1

谢谢！给其他人的提示：Vendor是项目根目录下的一个文件夹，不要在App下创建它。同时，请记得如果服务器没有加载vendor下刚复制的文件，需要重新启动服务器。 - Amin Ariana

6

尽管Rails 3.1（RC）允许使用SASS文件，但不强制要求使用。您的/public/stylesheets中的文件仍将正常提供服务。

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

有关更多信息，请查看我在快速谷歌搜索后找到的博客：http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html 至于IE 8的问题。 IE中存在一个错误，不总是执行条件，因此请尝试以下方法

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

这是一种稍微有些欺骗性的方式，可以尝试重置解析器以执行规则。

- colinross

但是 <%= stylesheet_link_tag %> 不是会在 app/assets/stylesheets/ 目录下查找吗？那么如何加载 /public/stylesheets 目录中的 CSS 文件呢？ - Christian Fazzini

据我所知，该助手仍在查找 /public/stylesheets 目录，但是，你可以始终使用 stylesheet_link_tag('/public/stylesheets/application.css') 指定完整路径，以防它在未来发生更改（我们正在讨论的是一个发布候选版本，而不是稳定版本）。 - colinross

至少在发布候选版中，它似乎没有查找 /public/stylesheets 目录，因为那应该是一个完整的 Web 路径，而不是文件系统路径，所以没有 public 目录。对我来说，调用这个工作的方法是：stylesheet_link_tag '/stylesheets/blueprint/print', :media => 'print'。 - jrduncans

我实际上有更长的时间浏览了Github上rails/rails的主分支，据我所知，sprockets函数并不是公开的。仅这个子包就有大约10个左右的未解决问题，因此就稳定性或发布状态而言，我认为我们还有很长的路要走。最终（在这里做出一个明智的猜测），后端将根据config.assets.enabled在遗留框架（/public/*）和新的sprockets框架（/assets/*）之间进行切换。 - colinross

我的建议：小心处理，如果你正在使用3.1的边缘版本，请准备好在api更改时自行修复调用。 - colinross

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)

- montrealmike

一种优雅的方式是在特定布局中包含一组样式表。完美运作。 - Jim Wrubel

5

这里是如何在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'
  */

请在/Views/layouts/application.html.erb中添加application.css文件，该文件包括公共的蓝图文件。同时，根据需要还要添加打印样式表print.css和IE兼容样式表ie.css。请注意保留原有的HTML标签。

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

- wintersolutions

2

我完全同意你的解决方案，不认为在application.css中使用"require_tree"是一种好的实践，它会包含所有内容，显然过于激进。我曾经纠结了一段时间，最终选择了完全相同的解决方案，即使用application来包含那些脚手架样式，然后使用HTML标签来包含一些可选和条件性的样式。谢谢。

- Leon Guan

1

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

-1

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

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

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

http://compass-style.org/

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

- twmills

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian Fazzini · Accepted Answer

如果有人好奇我最后是如何做到的。

我删除了。

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

希望这能帮到有需要的人。