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

问题描述

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

不幸的是， application.css 清单中的默认 * = require_tree 命令包括 assets / stylesheets 目录并导致一个不愉快的CSS混乱。我目前的解决方法是一种强力的方法，其中我单独指定一切：

在application.css：

  * = require_self 
 * = require home.css 
 ... 
 * =需要蓝图/ screen.css 
  
 
 
 
在我的样式表partial（haml）：
 <！ -  [if lt IE 9] 
< script src =http://html5shiv.googlecode.com/svn/trunk/html5.js>< / script> 
！[endif]  - > 
 = stylesheet_link_tagapplication
 = stylesheet_link_tag'blueprint / print'，media：'print'
<！ -  [if if IE8]] 
 = stylesheet_link_tag'blueprint /即'
！[endif]  - > 
 = javascript_include_tagapplication
  
这可行，但不是特别漂亮。我做了几个小时的搜索甚至得到这么远，但我希望有一些更简单的方法，我刚刚错过了。如果我甚至可以选择性地渲染某些目录（不包括子目录），这将使整个过程不那么僵硬。
 
 
 
谢谢！
 
 <我已经发现一种方法，通过仍然使用资产管道，但使样式表分组，使其不那么僵硬和未来证明。它不是比你的解决方案简单得多，但是这个解决方案允许你自动添加新的样式表，而不必重新编辑整个结构。
 
 
 
你想做的是使用单独的清单文件来打破。首先，您必须重新整理 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 
 * / 
 
 / ** 
 *申请-print.css 
 * 
 * = require_self 
 * = require_tree ./print 
 * / 
 
 / ** 
 * application- ie.css 
 * 
 * = require_self 
 * = require_tree ./ie 
 * / 
  
接下来更新应用程序布局文件：
 <％= stylesheet_link_tag all，：media => all％> 
<％= stylesheet_link_tagapplication-print，：media => print％> 
 
<！ -  [if lte IE 8]> 
<％= stylesheet_link_tagapplication-ie，：media => all％> 
<！[endif]  - > 
  
最后，不要忘记将这些新的清单文件包含在config / environments / production.rb ：
  config.assets.precompile + =％w（application-all.css application-print.css application-ie.css ）
  
更新：
 
 
 
 out，如果你遵循这种结构，你必须注意图像引用。您有以下几种选择：
 
 
 移动图片以遵循相同的图案 
 
 
 
请注意，只有在图片不是全部共享的情况下才能使用
 
 
我期望这将是一个非初级的，因为它太复杂了
 
 
 
 
 
 符合图片路径：
 
 
 
  background：url（'/ assets / image.png'）;  
 
 
 
 
 
  SASS助手： 
 
 
 
  background：image-url（'image.png'）;  li> 
 
 
 
 
 
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.

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:

In application.css:
*= require_self
*= require home.css
...
*= require blueprint/screen.css
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.

Thanks!
解决方案
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.

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]-->
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 )
Update:

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

Move the images to follow the same pattern

Note that this only works if the images are not all shared
I expect this will be a non-starter for most since it complicates things too much

Qualify the image path:

background: url('/assets/image.png');

Use the SASS helper:

background: image-url('image.png');



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