Utilisation du pipeline d'actifs de Rails 3.1 pour utiliser certains css de manière conditionnelle

Question

Je suis en train de construire ma première application Rails solo en utilisant Rails 3.1.rc5. Mon problème est que je veux que mon site rende les différents fichiers CSS de manière conditionnelle. J'utilise Blueprint CSS et j'essaye de faire en sorte que sprockets/rails rendent screen.css la plupart du temps, print.css uniquement lors de l'impression, et ie.css uniquement lorsque le site est accessible depuis Internet Explorer.

Malheureusement, l'option par défaut *= require_tree dans le application.css Le manifeste comprend tout ce qui se trouve dans le assets/stylesheets et donne lieu à un désagréable fouillis CSS. Ma solution actuelle est une sorte de méthode de force brute où je spécifie tout individuellement :

Dans application.css :

*= require_self
*= require home.css
...
*= require blueprint/screen.css

Dans mes feuilles de style partielles (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"

Cela fonctionne mais ce n'est pas particulièrement joli. J'ai passé quelques heures à chercher pour arriver jusqu'ici, mais j'espère qu'il existe un moyen plus simple de le faire que j'ai manqué. Si je pouvais même rendre sélectivement certains répertoires (sans inclure les sous-répertoires), cela rendrait l'ensemble du processus beaucoup moins rigide.

Merci !

Answer 1

J'ai découvert un moyen de rendre ce système moins rigide et à l'épreuve du temps en utilisant toujours le pipeline de ressources mais en regroupant les feuilles de style. Ce n'est pas beaucoup plus simple que votre solution, mais celle-ci permet d'ajouter automatiquement de nouvelles feuilles de style sans avoir à rééditer toute la structure.

Ce que vous voulez faire, c'est utiliser des fichiers de manifeste séparés pour séparer les choses. Tout d'abord, vous devez réorganiser votre app/assets/stylesheets dossier :

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

Ensuite, vous modifiez les trois fichiers du manifeste :

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

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

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

Ensuite, vous mettez à jour le fichier de mise en page de votre application :

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

Enfin, n'oubliez pas d'inclure ces nouveaux fichiers manifestes dans votre config/environnements/production.rb :

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

Mise à jour :

Comme l'a souligné Max, si vous suivez cette structure, vous devez être attentif aux références d'images. Vous avez quelques choix :

1. Déplacez les images pour qu'elles suivent le même modèle
   • Notez que cela ne fonctionne que si les images ne sont pas toutes partagées.
   • Je m'attends à ce que ce soit un échec pour la plupart des gens, car cela complique trop les choses.
2. Qualifiez le chemin de l'image :
   • background: url('/assets/image.png');
3. Utilisez l'aide SASS :
   • background: image-url('image.png');

Answer 2

J'ai rencontré ce problème aujourd'hui.

J'ai fini par mettre toutes les feuilles de style spécifiques à IE dans lib/assets/stylesheets et par créer un fichier manifeste par version d'IE. Puis dans application.rb les ajouter à la liste des choses à précompiler :

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

Et dans vos mises en page, incluez ces fichiers manifestes de manière conditionnelle et vous êtes prêt à partir !

Answer 3

C'est une façon assez nette de le faire. J'utilise des classes conditionnelles sur html ou modernizr. Voir cet article pour une bonne représentation de ce qui fait quoi. modernizr-vs-conditional-classes-on-html