Dois-je utiliser @import ou fichiers manifest?

Rails 3.1 introduit une nouvelle façon d'organiser les deux CSS et JS avec l'introduction de fichiers de manifeste. Par exemple, application.js pourrait ressembler à ceci:

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

Cela permettra de saisir les différents bits de Jquery, tous de votre propre JS, de les enchaîner ensemble et servir comme d'un fichier unique des clients. Assez Simple.

Malheureusement, la situation n'est pas si clair pour moi avec SASS. SASS a déjà concaténation construit en utilisant @import.

Dois-je changer tous mes partiels en plein SASS des fichiers et de les concaténer en utilisant le fichier de manifeste ou de continuer à utiliser @import? Pourquoi?

  • J'ai déjà des problèmes avec les codes existants qui se brisa sur le nouveau asset pipeline de 3.1... je suis toujours dans le flou sur la façon d'utiliser sass sur ce
InformationsquelleAutor Rupert Madden-Abbott | 2011-05-20
  1. 30

    Pignons convertit toutes les importations en CSS avant de concaténation, de sorte qu'il ne peut pas être utilisé pour partager des mixin et variables dans des fichiers. Je devine que cela va rester de cette façon simplement parce que vous pouvez importer SASS, LESS CSS et des fichiers via cette méthode.

    Alors, voici comment je le fais:

    • Si j'ai ERB à comprendre (surtout pour asset_path() appels), je les ai mis dans mon fichier principal de l'application.css.scss.erb
    • Si j'ai vendored CSS je veux comprendre, j'ai besoin d'elle via les Pignons, par exemple //=require jquerymobile
    • Dans ce même fichier, j'utilise SASS @import de commande pour charger explicitement tous les fichiers. Aucun des @import ed fichiers peuvent être .erb bien.
      1. charge les trucs de base (par exemple, reset) et les importations avec mixin
      2. déclarer des variables
      3. importer les styles spécifiques

    Voici comment mon application.css est en ce moment. Ne pas oublier le ";" et les guillemets:

    // Using SASS import is required for variables and mixins to carry over between files.
@import "reset.css.scss";
@import "mixins.css.scss";

$color_base: #9b2d31;
$color_background: #c64e21;

// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$logo-url: url(<%= asset_path("logo.png") %>);

@import "application/layout.css.scss";
@import "application/sidebar.css.scss";
@import "application/videos.css.scss";
@import "application/pages.css.scss";
...

    Remarque que je suis encore à explorer les Rails 3.1 asset pipeline, de sorte que votre kilométrage peut varier. Je vais essayer de revenir & mise à jour si je trouve autre chose intéressante.

    • Juste une remarque que je pense que vous pouvez sauter le .css.scss de votre @importations. Au moins, mon application fonctionne sans eux.
    • Il est également nécessaire d'utiliser *= depend_on "_partialName" dans le manifeste de l'en-tête pour chaque @la dépendance aux importations. Cette duplication est ennuyeux, mais sans elle, les pignons de ne pas tenir compte lors de la partielle a été mis à jour et donc de ne pas régénérer le fichier. J'ai pris la liberté de mettre à jour votre réponse avec ce et le changement ci-dessus. N'hésitez pas à changer en arrière si vous êtes en désaccord.
    • Vous ne devez pas utiliser le Erb style 'asset_path" dans le SASS. Au lieu d'utiliser le sass-gem rails qui vous donne une sass méthode d'assistance appelé actif-chemin. Lire plus sous Fonctions -> Actif Aides à github.com/rails/sass-rails
    • J'ai toujours pensé que le ERB approche a été un peu maladroit. Je vais regarder dans ce SASS helper. Merci Thomas!
    • Vous pouvez également utiliser des boules pour les @import dans votre application.css.scss fichier, par exemple "@import " scss/**/*'". Et vous n'avez pas besoin d'utiliser depend_on plus, que lorsque les fichiers sont importés sont mis à jour pignons est de recompiler les actifs.
    InformationsquelleAutor webmat
  2. 2

    La meilleure façon de résoudre ce problème est d'utiliser le natif @import directive, comme expliqué ici: https://github.com/rails/sass-rails#important-note

    Cette question a été déjà répondu ici : comment utiliser les pignons des importations avec sass

    Espérons que cette aide! 🙂

    InformationsquelleAutor user2263402
  3. 1

    La sass-rails gem explicitement les états pas utiliser le require syntaxe avec SASS fichiers - utilisation de SASS est @import plutôt les instructions.

    InformationsquelleAutor Yarin