web-dev-qa-db-fra.com

Que font les includePaths de Gulp?

J'essaie de commencer à utiliser les bibliothèques Bourbon et Neat Sass dans mon projet. Je veux compiler Sass avec Gulp. Il s'agit d'une simple configuration de tâche styles que j'ai trouvée dans l'un des didacticiels:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    neat = require('node-neat').includePaths;

var paths = {
    scss: './assets/styles/*.scss'
};

gulp.task('styles', function () {
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: ['styles'].concat(neat)
        }))
        .pipe(gulp.dest('./dist/styles'));
});

gulp.task('default', function () {
    gulp.start('styles');
});

Puis dans le principal .scss fichier je place les importations:

@import "bourbon";
@import "base/base";
@import "neat";

Cette tâche s'exécute correctement.

Ce qui me laisse perplexe, c'est ce que fait includePaths exactement? Sur la base de l'exemple ci-dessus, quelqu'un peut-il m'expliquer quel est le rôle de includePath?

sassgulpbourbonneat
23
luqo33

Le compilateur SASS utilise chaque chemin dans loadPaths lors de la résolution de SASS @imports.

loadPaths: ['styles/foo', 'styles/bar']

@import "x"; // found via ./styles/foo/_x.scss
@import "y"; // found via ./styles/bar/_y.scss

Notez que le compilateur résout chaque @import en considérant chaque chemin dans loadPaths de de gauche à droite (similaire à $PATH dans un environnement UNIX). Un exemple de scénario pourrait être:

loadPaths: ['styles/i', 'styles/ii', 'styles/iii', 'styles/iv']

@import "x"; // no file at ./styles/i/_x.scss
             // no file  at ./styles/ii/_x.scss
             // found a file  at ./styles/iii/_x.scss ...
             //     ... this file will be used as the import
             //     ... terminate lookup
             // the file ./styles/iv/_x.scss will be ignored

Il n'y avait pas _x.scss fichier dans styles/i, donc il a continué à regarder à l'intérieur styles/ii. Finalement, il a trouvé un _x.scss fichier dans styles/iii et a terminé la recherche. Il examine chaque dossier dans loadPaths en commençant par le premier élément du tableau et en se déplaçant vers la droite. Après avoir tenté tous les chemins, si nous ne pouvons pas trouver le fichier, nous déclarons que cette instruction @import n'est pas valide.

Les chemins de chargement sont utiles si vous avez une bibliothèque externe (comme bournon/neat). La bibliothèque externe est volumineuse et utilisera de nombreuses instructions @import. Cependant, ils ne correspondront pas à la structure de votre dossier de projet et ne seront donc pas résolus. Cependant, vous pouvez ajouter un dossier supplémentaire aux loadPaths afin que les @imports à l'intérieur de la bibliothèque externe do résolvent.

23
James Lawson

includePaths

Type: tableau Par défaut: []

Un tableau de chemins que libsass peut rechercher pour tenter de résoudre vos déclarations @import. Lorsque vous utilisez des données, il est recommandé de l'utiliser.

dans sass, vous pouvez organiser vos fichiers sass dans plusieurs dossiers, mais vous voulez que votre main.sass puisse les importer lors de sa compilation, afin que vous puissiez spécifier le includePaths, afin que sass sache où trouver le fichier @import sass file, ici vous utilisez node-neat, si vous souhaitez en importer certains styles, par défaut, sass ne sait pas où chercher, vous devez donc indiquer à sass où trouver le fichier à importer

5
Sean