Rails 3.1アセットパイプラインを使用して特定のCSSを条件付きで使用する

Rails 3.1.rc5を使用して最初のソロRailsアプリを作成しているところです。私の問題は、サイトにさまざまなCSSファイルを条件付きでレンダリングさせたいことです。私はBlueprint CSSを使用しており、screen.cssほとんどのprint.css場合、印刷時とie.cssInternet 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');

今日この問題に出くわした。

最終的に、すべてのIE固有のスタイルシートをlib / assets / stylesheetsに配置し、IEのバージョンごとに1つのマニフェストファイルを作成しました。次に、application.rbでそれらをプリコンパイルするもののリストに追加します。

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

そして、レイアウトに条件付きでそれらのマニフェストファイルを含めれば、準備完了です！

それはそれを行うにはかなりきちんとした方法です。私はhtmlまたはmodernizrで条件付きクラスを使用しています。何が何をするかについての適切な表現については、この記事を参照してください。 modernizr-vs-conditional-classes-on-html