Utilisation du pipeline d'actifs Rails 3.1 pour utiliser conditionnellement certains CSS

166

Je suis en train de créer ma première application Rails solo en utilisant Rails 3.1.rc5. Mon problème est que je souhaite que mon site affiche les différents fichiers CSS de manière conditionnelle. J'utilise Blueprint CSS et j'essaie de rendre les pignons / rails la screen.cssplupart du temps, print.cssuniquement lors de l'impression et ie.cssuniquement lorsque le site est accessible depuis Internet Explorer.

Malheureusement, la *= require_treecommande par défaut dans le application.cssmanifeste inclut tout ce qui se trouve dans le assets/stylesheetsrépertoire et entraîne un désagréable fouillis CSS. Ma solution de contournement 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 fait quelques heures de recherche pour aller aussi loin, mais j'espère qu'il existe un moyen plus simple de le faire que je viens de manquer. Si je pouvais même rendre sélectivement certains répertoires (sans inclure de sous-répertoires), cela rendrait l'ensemble du processus beaucoup moins rigide.

Merci!

— talon55
source

Réponses:

223

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

Ce que vous voulez faire, c'est utiliser des fichiers manifestes séparés pour interrompre les choses. Vous devez d'abord réorganiser votre app/assets/stylesheetsdossier:

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 manifestes:

/**
 * 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 )

Mettre à jour:

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

Déplacez les images pour suivre le même modèle
- Notez que cela ne fonctionne que si les images ne sont pas toutes partagées
- Je pense que ce sera un non-démarreur pour la plupart car cela complique trop les choses
Qualifiez le chemin de l'image:
- background: url('/assets/image.png');
Utilisez l'assistant SASS:
- background: image-url('image.png');

— gcastro
source

Bien que ce soit une belle organisation des fichiers, je pense que cela résout toujours le problème essentiel de la même manière que la question elle-même.

— semperos

@semperos, vous avez raison de dire que la forme de la solution est essentiellement la même mais ma proposition nous permet toujours d'utiliser le pipeline d'actifs pour l'intégralité des feuilles de style. Je ne sais pas s'il existe un autre moyen d'inclure de manière sélective une partie des styles à moins que ce ne soit sur une feuille de style distincte. Au moins de cette façon, nous ne compilons que quelques fichiers CSS.

— gcastro

Quelque chose comme ça dans le guide Rails Asset Pipeline serait en fait bon. merci

— Bashar Abdullah

Il y a cependant un piège: si vous suivez cette structure et utilisez des .cssfichiers simples , toutes vos images seront brisées. Par exemple, background: url('image.png')sera traduit sur le chemin /assets/all/image.png(attention à tout le chemin). Au lieu de cela cela fonctionne: background: url('/assets/image.png). S'il existe une solution plus simple à ce problème, veuillez la poster. Autre que l'utilisation de SASS qui a des méthodes d'aide qui résolvent probablement le chemin correctement.

— Max

@ExiRe, oui. Toutes les feuilles de style ou fichiers / manifestes JS qui ne suivent pas le modèle standard doivent être ajoutés au tableau de précompilation (voir: guides.rubyonrails.org/asset_pipeline.html#precompiling-assets )

— gcastro

Je suis tombé sur ce problème aujourd'hui.

Fini par mettre toutes les feuilles de style spécifiques à IE dans lib / assets / stylesheets et en créant un fichier manifeste par version d'IE. Puis dans application.rb ajoutez-les à la liste des choses à précompiler:

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

Et dans vos mises en page, incluez conditionnellement ces fichiers manifestes et vous êtes prêt à partir!

— Anthony Alberto
source

C'est une manière assez soignée 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-classes-conditionnelles-sur-html

— mrmonroe
source