Wie kann ich bedingtes CSS-Laden mit der Rails 3.1 Asset Pipeline implementieren?

Verwenden der Rails 3.1 Asset Pipeline für bedingtes Laden von CSS

Beim Erstellen von Webanwendungen mit Rails kann es notwendig sein, CSS-Dateien selektiv zu rendern basierend auf spezifischen Bedingungen. Dies kann mithilfe der Asset-Pipeline von Rails 3.1 erreicht werden.

Standardmäßig schließt der Befehl *= require_tree in application.css alle CSS-Dateien im Verzeichnis asset/stylesheets ein. Dies kann jedoch zu unerwünschten Ergebnissen führen, wenn Sie Dateien bedingt rendern möchten.

Eine Problemumgehung besteht darin, jede CSS-Datei einzeln manuell in application.css anzugeben und einen Teil zu verwenden, um die verbleibenden Dateien bedingt einzuschließen. Diese Methode kann jedoch umständlich und unflexibel werden.

Eine effizientere Lösung besteht darin, mehrere Manifestdateien zu verwenden, um CSS-Dateien zu trennen. Indem Sie sie in relevanten Verzeichnissen organisieren und separate Manifestdateien für jedes Verzeichnis erstellen, können Sie Dateien basierend auf bestimmten Bedingungen einfach ein- oder ausschließen.

Hier ist ein Beispiel für die Strukturierung des Asset-Verzeichnisses:

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

Und die entsprechenden Manifestdateien:

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

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

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

Aktualisieren Sie abschließend das Anwendungslayout Datei:

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

Vergessen Sie nicht, die neuen Manifestdateien in config/environments/produktion.rb vorzukompilieren:

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

Beachten Sie, dass Sie bei Verwendung dieser Struktur Folgendes sicherstellen müssen Stellen Sie sicher, dass alle Bildverweise in Ihren CSS-Dateien entweder mithilfe des SASS-Hilfsprogramms image-url() mit dem vollständigen Pfad qualifiziert oder so verschoben werden, dass sie derselben Verzeichnisstruktur folgen.

Das obige ist der detaillierte Inhalt vonWie kann ich bedingtes CSS-Laden mit der Rails 3.1 Asset Pipeline implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!