3

这些是我的页面包含的样式（顶部的样式在生产中返回错误） 

<link href="/assets/foundation.css" rel="stylesheet" type="text/css" />
<link href="/assets/app.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

<link href="/assets/application-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cd6a361c13ee838fceb09ecb2c58c467.js" type="text/javascript"></script>

我的网站是响应式的，所以我希望根据屏幕大小包含所需的样式。有没有办法单独预编译我的 css，使它看起来像这样：

<link href="/assets/foundation-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/app-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

那么就不需要application.css，也将它们结合起来破坏了我的css。我的网站在开发中看起来不错:)

现在我在 config/application.rb 中设置了 config.assets.enabled = false，压缩 css 并自己手动包含它会更好吗？

这有点类似于这个问题，除了我不喜欢任何答案。当然有一个简单的解决方案。 使用 Rails 3.1 资产管道有条件地使用某些 css

4

1 回答 1

1

我认为您在一般情况下使用资产管道的方向是错误的。如果您要使用管道，您只需要保留application.css- 这是一个清单文件，用于包含您的css文件。我的建议是将您link href=从视图中移出并使用清单文件（application.css），如下所示：

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree

您现在包含的是预编译的 css 文件（注意哈希前缀），每次修改 assets 时，哈希前缀都会更改。

文件的情况也是如此.js——您必须将它们包含在application.js清单文件中。

编辑：使用 SASS (3.2) 和媒体查询（如这篇 CSS-tricks 文章中所述，关于@penner）的想法很适合这种情况。

于 2013-01-25T09:01:51.147 回答