链轮-多个入口点？

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中的链轮，但这里有个问题--我的应用程序必须支持多种布局(桌面浏览器)和移动客户端(iphone、ipad、android手机等)。

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

我怎么才能修复它呢？

Answer 1

通过为每个CSS文件创建一个链轮文件，可以获得多个顶级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中设置预编译的资产列表

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

Answer 2

我真的不确定链轮是否支持这一点，但我知道如果你使用Jammit gem。您可以设置不同的包，每个包都有自己的JS或css文件鸡尾酒。例如，有一个:用于桌面的工作空间包和:用于移动设备的移动包。它都是在一个配置yaml文件中定义的，它将按照你列出的顺序将它们连接起来，这有助于正确地获得插件依赖等。

javascripts:
  workspace:
    - public/javascripts/vendor/jquery.js
    - public/javascripts/lib/*.js
    - public/javascripts/views/**/*.js
    - app/views/workspace/*.jst

  mobile:
    - public/javascripts/vendor/jquery.js
    - public/javascripts/lib/mobile.js


stylesheets:
  common:
    - public/stylesheets/reset.css
    - public/stylesheets/widgets/*.css
  workspace:
    - public/stylesheets/pages/workspace.css
  mobile:
    - public/stylesheets/pages/mobile.css

Jammit可能值得一看，以满足您的需求

希望这能有所帮助。

Answer 3

我假设您已经为每个设备或设备组设置了不同的布局。如果是这样，只需在每个文件中包含不同的顶级css文件，然后在这些顶级文件中使用不同的require语句。如果您使用的是Rails3.1，则没有理由必须保留包含所有css文件的内置代码行。