ruby-on-rails - sprockets - 多个入口点？

Question

Sprockets official documentation明确地说:

Sprockets takes any number of source files and preprocesses them
line-by-line in order to build a `single` concatenation.

我是 Rails 中 sprockets 的忠实粉丝，但问题是——我的应用程序必须支持多种布局(桌面浏览器)和移动客户端(iphone、ipad、android 手机等)。

这两种布局都需要自己的 HTML 重置 CSS 规则。桌面和移动重置文件的串联规则会产生冲突，因为它们会覆盖低级 CSS 指令。

我该如何解决？

Answer 1

您可以通过为每个文件创建一个 Sprocket 文件来获取多个顶级 CSS 文件。例如，假设您希望 desktop.css 由 reset.css、common.css 和 ie.css 和 mobile.css 由 common.css 和 ios.css 组成。您将拥有以下文件:

• app/assets/stylesheets/desktop.css
• app/assets/stylesheets/mobile.css
• app/assets/stylesheets/reset.css
• app/assets/stylesheets/common.css
• app/assets/stylesheets/ie.css
• app/assets/stylesheets/ios.css

在 desktop.css 中，您将拥有以下内容:

/*
 *= require reset.css
 *= require common.css
 *= require ie.css
 */

在 mobile.css 中，您将拥有以下内容:

/*
 *= require common.css
 *= require ios.css
 */

然后，在 app/views/layouts/desktop.html.erb 中，你会做

<%= stylesheet_link_tag :desktop, :debug => Rails.env.development? %>

对于 mobile.html.erb 也是如此。

最后，您需要在 config/environments/production.rb 中设置预编译 Assets 列表:

config.assets.precompile = %w( desktop.css mobile.css )