使用 Rails 3.1资产管道有条件地使用某些 css

我正在用 Rails 3.1构建我的第一个单独的 Rails 应用程序。Rc5.我的问题是，我想让我的网站有条件地呈现各种 CSS 文件。我使用的是 Blueprint CSS，大部分时间我都是使用 sprockets/ails 渲染 screen.css，只有在打印的时候才渲染 print.css，只有在从 Internet Explorer 访问站点的时候才渲染 ie.css。

遗憾的是，application.css清单中的默认 *= require_tree命令包含 assets/stylesheets目录中的所有内容，并导致令人不快的 CSS 混乱。我目前的解决办法是一种蛮力方法，我单独指定每件事:

在应用中 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"

这个可以，但不是特别漂亮。为了走到这一步，我已经找了几个小时，但我希望能找到一些我刚刚错过的更简单的方法。如果我甚至可以有选择地渲染某些目录(不包括子目录) ，这将使整个过程少了很多僵化。

谢谢！

43107

小开

最佳答案

我发现了一种方法，通过仍然使用资产管道，但是将样式表分组，可以减少严格性和未来的证明。它并不比您的解决方案简单多少，但是这个解决方案允许您自动添加新的样式表，而无需重新编辑整个结构。

您想要做的是使用单独的清单文件来分解数据。首先你必须重新组织你的 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/environment/production.rb 中包含这些新的清单文件:

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

更新:

正如 Max 指出的，如果你遵循这个结构，你必须留意图像引用。你有几个选择:

移动图像以遵循相同的模式
- 请注意，这只有在图像不是全部共享的情况下才有效
- 我希望这对大多数人来说是不可能的，因为它使事情变得太复杂了
修改图像路径:
- background: url('/assets/image.png');
使用「学校资讯科技教育自评系统」助手:
- background: image-url('image.png');