使用 Rails 3.1 资产管道有条件地使用某些 css [英] Using Rails 3.1 assets pipeline to conditionally use certain css

问题描述

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

I’m in the process of building my first solo Rails app using Rails 3.1.rc5. My problem is that I want to have my site render the various CSS files conditionally. I’m using Blueprint CSS and I’m trying to have sprockets/rails render screen.css most of the time, print.css only when printing, and ie.css only when the site is accessed from Internet Explorer.

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

Unfortunately, the default *= require_tree command in the application.css manifest includes everything in the assets/stylesheets directory and results in an unpleasant CSS jumble. My current workaround is a sort of brute-force method where I specify everything individually:

在 application.css 中:

In application.css:

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

在我的样式表中部分(haml):

In my stylesheets partial (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"

这行得通，但不是特别漂亮.我已经进行了几个小时的搜索才能走到这一步，但我希望有一些我刚刚错过的更简单的方法来做到这一点.如果我什至可以有选择地渲染某些目录(不包括子目录)，那么整个过程就会变得不那么僵化.

This works but it’s not especially pretty. I’ve done a few hours of searching to even get this far but I’m hoping that there’s some easier way to do it that I’ve just missed. If I could even selectively render certain directories (without including subdirectories) it would make the whole process a lot less rigid.

谢谢！

推荐答案

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

I've discovered a way to make it less rigid and future proof by still using the asset pipeline but having the stylesheets grouped. It's not much simpler than your solution, but this solution allows you to automatically add new stylesheets without having to re-edit the whole structure again.

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

What you want to do is use separate manifest files to break things up. First you have to re-organize your app/assets/stylesheets folder:

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

然后编辑三个清单文件:

Then you edit the three manifest files:

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

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

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

接下来更新您的应用程序布局文件:

Next you update your application layout file:

<%= 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 中包含这些新的清单文件:

Lastly, don't forget to include these new manifest files in your config/environments/production.rb:

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

更新:

正如 Max 指出的那样，如果您遵循此结构，则必须注意图像引用.您有几个选择:

As Max pointed out, if you follow this structure you have to be mindful of image references. You have a few choices:

1. 移动图像以遵循相同的模式
   • 请注意，这仅在图像未全部共享时才有效
   • 我希望这对大多数人来说都不是入门，因为它使事情变得过于复杂

• 背景:url('/assets/image.png');

• 背景:image-url('image.png');

这篇关于使用 Rails 3.1 资产管道有条件地使用某些 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！