web-dev-qa-db-fra.com

Utiliser Rails 3.1 assets pipeline pour utiliser conditionnellement certains fichiers CSS

Je suis en train de construire mon premier solo Rails app utilisant Rails 3.1.rc5. Mon problème est que je souhaite que mon site rende les différents Fichiers CSS conditionnels. J'utilise Blueprint CSS et j'essaie de faire en sorte que sprockets/Rails rende screen.css le plus souvent, print.css uniquement lors de l’impression, et ie.css uniquement lorsque le site est accessible à partir d’Internet Explorer.

Malheureusement, la valeur par défaut *= require_tree commande dans le application.css manifeste comprend tout dans le assets/stylesheets répertoire et donne lieu à un embrouillage CSS déplaisant. 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 fait quelques heures de recherche pour aller aussi loin, mais j’espère qu’il y aura un moyen plus facile de le faire que je viens de manquer. Si je pouvais même rendre certains répertoires de manière sélective (sans inclure les sous-répertoires), cela rendrait le processus beaucoup moins rigide.

Merci!

cssruby-on-rails-3.1asset-pipelinesprockets
166
talon55

J'ai découvert un moyen de le rendre moins rigide et plus évolutif 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 toute la structure.

Ce que vous voulez faire, c'est utiliser des fichiers de manifeste distincts pour casser les choses. Vous devez d’abord réorganiser votre dossier app/assets/stylesheets:

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 éditez 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 manifest 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 suivre le même schéma
    • Notez que cela ne fonctionne que si les images ne sont pas toutes partagées.
    • Je m'attends à ce que ce soit un non-démarreur pour la plupart, car cela complique trop les choses
  2. Qualifiez le chemin de l'image:
    • background: url('/assets/image.png');
  3. tilisez l’assistant SASS:
    • background: image-url('image.png');
223
gcastro

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

Nous avons fini par mettre toutes les IE feuilles de style spécifiques dans lib/assets/stylesheets et créer un fichier manifeste par version d'IE. Ensuite, dans application.rb, ajoutez-les à la liste des éléments à précompiler:

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

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

10
Anthony Alberto

C’est une façon très soignée de le faire. J'utilise des classes conditionnelles sur html ou modernizr. Voir cet article pour une bonne représentation sur quoi fait quoi. modernizr-vs-conditionnel-classes-sur-html

2
mrmonroe