使用 Rails 3.1 资产管道有条件地使用某些 css
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7134034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Rails 3.1 assets pipeline to conditionally use certain css
提问by talon55
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.
我正在使用 Rails 3.1.rc5 构建我的第一个单独的 Rails 应用程序。我的问题是我想让我的网站有条件地呈现各种 CSS 文件。我正在使用 Blueprint CSS 并且我试图在screen.css
大部分时间都渲染链轮/导轨,print.css
仅在打印时,并且ie.css
仅在从 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:
不幸的是,清单中的默认*= require_tree
命令application.css
包含assets/stylesheets
目录中的所有内容,并导致令人不快的 CSS 混乱。我目前的解决方法是一种蛮力方法,我单独指定所有内容:
In application.css:
在 application.css 中:
*= require_self
*= require home.css
...
*= require blueprint/screen.css
In my stylesheets partial (haml):
在我的样式表部分(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!
谢谢!
回答by gcastro
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
文件夹:
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/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:
正如 Max 指出的那样,如果您遵循这种结构,则必须注意图像引用。你有几个选择:
- 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');
- 移动图像以遵循相同的模式
- 请注意,这仅在图像未全部共享时才有效
- 我希望这对大多数人来说都不是首发,因为它使事情变得过于复杂
- 限定图片路径:
background: url('/assets/image.png');
- 使用 SASS 助手:
background: image-url('image.png');
回答by Anthony Alberto
Came across this problem today.
今天遇到这个问题。
Ended up putting all IE specific stylesheets into lib/assets/stylesheets and creating one manifest file per version of IE. Then in application.rb add them to the list of things to precompile :
最终将所有特定于 IE 的样式表放入 lib/assets/stylesheets 并为每个 IE 版本创建一个清单文件。然后在 application.rb 中将它们添加到要预编译的内容列表中:
config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]
And in your layouts, conditionally include those manifest files and you're good to go!
在您的布局中,有条件地包含这些清单文件,您就可以开始了!
回答by mrmonroe
Thats a pretty neat way to do it. I use conditional classes on html or modernizr. See this article for a good representation on what does what. modernizr-vs-conditional-classes-on-html
这是一个非常巧妙的方式来做到这一点。我在 html 或 Modernizr 上使用条件类。请参阅这篇文章,以很好地说明什么是什么。 Modernizr-vs-conditional-classes-on-html