web-dev-qa-db-ja.com

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

Rails 3.1.rc5を使用して、最初のソロRailsアプリを構築しています。私の問題は、サイトにさまざまなCSSファイルを条件付きでレンダリングさせたいということです。私はブループリントCSSを使用しており、スプロケット/レールでほとんどの場合screen.css、印刷時にのみprint.css、インターネットからサイトにアクセスするときにのみie.cssをレンダリングしようとしています。冒険者。

残念ながら、*= 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"

これは機能しますが、特にきれいではありません。ここまで到達するために数時間の検索を行いましたが、今まで見逃した簡単な方法があることを望んでいます。サブディレクトリを含めずに特定のディレクトリを選択的にレンダリングすることさえできれば、プロセス全体の剛性が大幅に低下します。

ありがとう！

cssruby-on-rails-3.1asset-pipelinesprockets
166
talon55

アセットパイプラインを引き続き使用し、スタイルシートをグループ化することで、柔軟性と将来性を低下させる方法を発見しました。ソリューションよりも単純ではありませんが、このソリューションを使用すると、構造全体を再度編集することなく、新しいスタイルシートを自動的に追加できます。

やりたいことは、別のマニフェストファイルを使用して物事を分割することです。まず、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 )

更新：

マックスが指摘したように、この構造に従う場合、画像参照に注意する必要があります。いくつかの選択肢があります。

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

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

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

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

そして、あなたのレイアウトに、それらのマニフェストファイルを条件付きで含めてください。

10
Anthony Alberto

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

2
mrmonroe