[解決済み] Rails 3.1 の assets pipeline を使って特定の css を条件付きで使用する

質問

Rails 3.1.rc5を使用して、初めての単独Railsアプリを構築しているところです。私の問題は、私のサイトに様々なCSSファイルを条件付きでレンダリングさせたいということです。私はBlueprint CSSを使用しており、sprockets/railsが以下をレンダリングするようにしようとしています。 screen.css ほとんどの場合 print.css は印刷時のみ、そして ie.css Internet Explorerからアクセスした場合のみ。

残念ながら、デフォルトの *= require_tree コマンドを application.css マニフェストに含まれるすべての assets/stylesheets ディレクトリの中に入ってしまい、不快なCSSのごちゃごちゃになってしまいます。私の現在の回避策は、すべてを個別に指定する、一種のブルートフォース方式です。

application.cssで。

*= require_self
*= require home.css
...
*= require blueprint/screen.css

私のスタイルシートのパーシャル（haml）で。

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

これは動作しますが、特にきれいではありません。ここまで来るのに数時間検索しましたが、私が見落としているだけで、もっと簡単な方法があるのではないかと思っています。もし、特定のディレクトリを（サブディレクトリを含めずに）選択的にレンダリングすることができれば、全体のプロセスをより簡単にすることができるのですが。

ありがとうございます。

解決方法は？

私は、アセットパイプラインを使用しながらも、スタイルシートをグループ化することで、硬直的でなく、将来性のある方法を発見しました。あなたの解決策よりもずっとシンプルというわけではありませんが、この解決策によって、構造全体を再び編集することなく、新しいスタイルシートを自動的に追加することができます。

あなたがやりたいことは、別々のマニフェストファイルを使って、物事を分割することです。まず app/assets/stylesheets フォルダーに格納されます。

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

次に、3つのマニフェストファイルを編集します。

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

次に、アプリケーションのレイアウトファイルを更新します。

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

最後に、これらの新しいマニフェストファイルを config/environments/production.rb にインクルードすることを忘れないでください。

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

更新してください。

Maxが指摘したように、この構造に従うなら、画像参照に気をつけなければならない。いくつかの選択肢があります。

1. 同じパターンになるように画像を移動させる
   • この機能は、画像がすべて共有されていない場合にのみ動作することに注意してください。
   • 物事を複雑にしすぎるため、ほとんどの場合、これは非対策であると予想されます。
2. 画像のパスを修飾します。
   • background: url('/assets/image.png');
3. SASSヘルパーを使用します。
   • background: image-url('image.png');