鏈輪 - 多個入口點？

Question

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

我該如何解決？

Answer 1

通過為每個文件制作一個 Sprocket 文件，您可以獲得多個頂級 CSS 文件。 For example, say you want desktop.css 8CBA22E28EB17B5F5C6AE2A266AZ to be comprised of reset.css , common.css , and ie.css and mobile.css to be comprised of common.css and 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

我不確定 sprockets 是否支持這一點，但我知道如果你使用Jammit gem。 您可以使用自己的 JS 或 css 文件來設置不同的包。 例如，有一個：工作區 package 用於桌面和：移動 package 用於手機。 它都在配置 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 文件的內置行。