Bagaimanakah Saya Boleh Melaksanakan Pemuatan CSS Bersyarat dengan Rails 3.1 Asset Pipeline?

Menggunakan Rails 3.1 Asset Pipeline untuk Pemuatan CSS Bersyarat

Apabila membina aplikasi web dengan Rails, anda mungkin perlu memaparkan fail CSS secara terpilih berdasarkan syarat tertentu. Ini boleh dicapai menggunakan saluran paip aset Rails 3.1.

Secara lalai, perintah *= require_tree dalam application.css merangkumi semua fail CSS dalam direktori aset/stylesheets. Walau bagaimanapun, ini boleh membawa kepada hasil yang tidak diingini jika anda mahu memaparkan fail secara bersyarat.

Satu penyelesaian adalah dengan menentukan secara manual setiap fail CSS secara individu dalam application.css dan menggunakan separa untuk menyertakan fail yang tinggal secara bersyarat. Walau bagaimanapun, kaedah ini boleh menjadi rumit dan tidak fleksibel.

Penyelesaian yang lebih cekap ialah menggunakan berbilang fail manifes untuk mengasingkan fail CSS. Dengan menyusunnya ke dalam direktori yang berkaitan dan mencipta fail manifes yang berasingan untuk setiap direktori, anda boleh memasukkan atau mengecualikan fail dengan mudah berdasarkan syarat tertentu.

Berikut ialah contoh cara menstruktur direktori aset:

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

Dan fail manifes yang sepadan:

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

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

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

Akhir sekali, kemas kini reka letak aplikasi fail:

<%= 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\]-->

Jangan lupa untuk menyusun semula fail manifes baharu dalam config/environments/production.rb:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Perhatikan bahawa apabila menggunakan struktur ini, anda perlu memastikan bahawa sebarang rujukan imej dalam fail CSS anda sama ada layak dengan laluan penuh, menggunakan url imej pembantu SASS(), atau dialihkan untuk mengikuti direktori yang sama struktur.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Pemuatan CSS Bersyarat dengan Rails 3.1 Asset Pipeline?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!