☰

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

tag-icon • tag-icon css ruby-on-rails-3.1 asset-pipeline sprockets
Rails 3.1 アセットパイプラインを使用して特定の CSS を条件付きで使用する 質問する

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

残念ながら、マニフェストのデフォルト*= 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"

これは機能しますが、特にきれいではありません。ここまでたどり着くまでに数時間検索しましたが、私が見逃しただけのもっと簡単な方法があることを願っています。特定のディレクトリを選択的にレンダリングできれば (サブディレクトリを含めずに)、プロセス全体がずっと楽になります。

ありがとう！

ベストアンサー1

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

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

おすすめ記事