7

Sprockets 官方文档明确表示：

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 指令。

我该如何解决？

4

3 回答 3

7

您可以通过为每个文件制作一个 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：

config.assets.precompile = %w( desktop.css mobile.css )
于 2011-06-18T02:23:09.590 回答
2

我不确定 sprockets 是否支持这一点，但我知道如果你使用Jammit gem。您可以设置不同的包，每个包都有自己的 JS 或 css 文件鸡尾酒。例如，有一个用于桌面的 :workspace 包和用于移动设备的 :mobile 包。它都在配置 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 可能值得一看以满足您的需求

希望这可以帮助。

于 2011-06-14T13:08:12.473 回答
0

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

于 2011-06-14T13:00:12.217 回答