鏈輪 - 多個入口點？

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文件，然後在這些頂級文件中使用不同的require語句。如果您使用的是Rails 3.1，那麼您沒有必要保留包含所有css文件的內置行。

Answer 2

我不確定鏈輪是否支持這個，但我知道如果你使用的是Jammit寶石。您可以使用它自己的JS或css文件雞尾酒來設置不同的包。例如有一個：桌面和工作區包：手機包的移動包。 這完全是在配置YAML文件中定義的，它會Concat的他們在你列出的順序，它可以幫助獲取插件的依賴關係正確等

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文件創建一個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)