Rails 3.1 アセット パイプラインで条件付き CSS 読み込みを実装するにはどうすればよいですか?

条件付き CSS 読み込みに Rails 3.1 アセット パイプラインを使用する

Rails で Web アプリケーションを構築する場合、CSS ファイルを選択的にレンダリングすることが必要になる場合があります特定の条件に基づいて。これは、Rails 3.1 アセット パイプラインを使用して実現できます。

デフォルトでは、application.css の *= require_tree コマンドには、assets/stylesheets ディレクトリ内のすべての CSS ファイルが含まれます。ただし、ファイルを条件付きでレンダリングする場合は、望ましくない結果が生じる可能性があります。

回避策の 1 つは、application.css で各 CSS ファイルを個別に手動で指定し、パーシャルを利用して残りのファイルを条件付きで含めることです。ただし、この方法は煩雑で柔軟性がなくなる可能性があります。

より効率的な解決策は、複数のマニフェスト ファイルを利用して CSS ファイルを分離することです。これらを関連するディレクトリに整理し、ディレクトリごとに個別のマニフェスト ファイルを作成することで、特定の条件に基づいてファイルを簡単に含めたり除外したりできます。

アセット ディレクトリを構造化する方法の例を次に示します。

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

および対応するマニフェスト ファイル:

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

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

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

最後に、アプリケーション レイアウトを更新します。 file:

<%= 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 )

で新しいマニフェスト ファイルをプリコンパイルすることを忘れないでください。この構造を使用する場合は、次のことを確認する必要があることに注意してください。 CSS ファイル内の画像参照は、SASS ヘルパー image-url() を使用してフルパスで修飾されているか、同じディレクトリに続くように移動されていること。構造。

以上がRails 3.1 アセット パイプラインで条件付き CSS 読み込みを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。