7

Sprockets の公式ドキュメントには、次のように明確に記載されています。

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 ディレクティブをオーバーライドするため、競合を引き起こします。

どうすれば修正できますか？

4

3 に答える 3

7

それぞれの Sprocket ファイルを作成することで、複数の最上位 CSS ファイルを取得できます。たとえば、 、、およびでdesktop.css構成され、およびで構成されるとします。次のファイルがあります。reset.csscommon.cssie.cssmobile.csscommon.cssios.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

スプロケットがこれをサポートしているかどうかはよくわかりませんが、Jammit gem を使用すればわかります。JS または css ファイルの独自のカクテルを使用して、それぞれ異なるパッケージをセットアップできます。たとえば、デスクトップ用の :workspace パッケージと、モバイル用の :mobile パッケージがあります。これはすべて config 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 に答える