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

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

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宝石。您可以使用自己的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语句。如果您使用的是Rails 3.1，则没有必要保留包含所有css文件的内置行。

链轮 - 多个入口点？

3 个答案: