26

我正在尝试将 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。）

这让我有两个问题

  1. 应该如何使用 SASS应用if lt IE 8条件？
  2. 如何使用 SASS 加载打印格式的 css 文件（即 <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>）？
4

7 回答 7

24

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

我删除了

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

希望这可以帮助某人。

于 2011-06-08T06:24:27.650 回答
16

这个博客有我认为你正在寻找的解决方案（就像我一样）。

不要把它放进去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 %>
于 2011-08-05T20:27:41.083 回答
6

尽管 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 并不总是执行条件，所以试试

<!--[if IE 8.000]><!--> <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> <!--<![endif]-->

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

于 2011-05-24T18:51:55.210 回答
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)
于 2011-06-29T17:04:14.027 回答
5

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

添加'blueprint-rails' gem：

/宝石文件

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' 中）。所以我们需要将它们添加到：

/配置/环境/production.rb

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

然后运行：

bundle exec rake assets:precompile
于 2012-01-24T03:09:44.180 回答
2

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

于 2011-09-06T07:36:57.410 回答
-1

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

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

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

http://compass-style.org/

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

于 2011-05-24T18:52:03.857 回答