167

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

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

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"

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

ありがとう！

4

3 に答える 3

223

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

あなたがしたいことは、別々のマニフェストファイルを使用して物事を分割することです。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');
于 2011-09-01T16:25:41.437 に答える
10

今日、この問題に遭遇しました。

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

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

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

于 2012-10-18T14:35:11.997 に答える
2

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

于 2012-04-25T19:02:02.823 に答える