167

我正在使用 Rails 3.1.rc5 构建我的第一个单独的 Rails 应用程序。我的问题是我想让我的网站有条件地呈现各种 CSS 文件。我正在使用 Blueprint CSS，并且我试图让 sprockets/railsscreen.css大部分时间渲染，print.css仅在打印时，并且ie.css仅在从 Internet Explorer 访问该站点时。

不幸的是，清单中的默认*= require_tree命令包括目录中的所有内容，并导致令人不快的 CSS 混乱。我目前的解决方法是一种蛮力方法，我单独指定所有内容：application.cssassets/stylesheets

在 application.css 中：

*= require_self
*= require home.css
...
*= require blueprint/screen.css

在我的部分样式表（haml）中：

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

这行得通，但不是特别漂亮。我已经进行了几个小时的搜索才能做到这一点，但我希望有一些我刚刚错过的更简单的方法来做到这一点。如果我什至可以有选择地呈现某些目录（不包括子目录），它将使整个过程不那么僵化。

谢谢！

4

3 回答 3

223

我发现了一种通过仍然使用资产管道但对样式表进行分组来使其不那么僵化和面向未来的方法。它并不比您的解决方案简单多少，但是此解决方案允许您自动添加新样式表，而无需再次重新编辑整个结构。

您想要做的是使用单独的清单文件来分解。首先你必须重新组织你的app/assets/stylesheets文件夹：

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

然后编辑三个清单文件：

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

接下来更新应用程序布局文件：

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

最后，不要忘记在 config/environments/production.rb 中包含这些新的清单文件：

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

更新：

正如 Max 指出的那样，如果您遵循此结构，则必须注意图像参考。你有几个选择：

  1. 移动图像以遵循相同的模式
    • 请注意，这仅在图像未全部共享时才有效
    • 我希望这对大多数人来说都不是首发，因为它使事情变得太复杂了
  2. 限定图像路径：
    • background: url('/assets/image.png');
  3. 使用 SASS 助手：
    • background: image-url('image.png');
于 2011-09-01T16:25:41.437 回答
10

今天遇到了这个问题。

最终将所有 IE 特定样式表放入 lib/assets/stylesheets 并为每个版本的 IE 创建一个清单文件。然后在 application.rb 中将它们添加到要预编译的内容列表中：

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

在您的布局中，有条件地包含这些清单文件，您就可以开始了！

于 2012-10-18T14:35:11.997 回答
2

这是一个非常巧妙的方法。我在 html 或 modernizr 上使用条件类。请参阅这篇文章，了解什么是做什么的。 modernizr-vs-conditional-classes-on-html

于 2012-04-25T19:02:02.823 回答