Что делает Gulp includePaths?

Я пытаюсь начать использовать библиотеки Bourbon и Neat Sass в моем проекте. Я хочу скомпилировать Sass с помощью Gulp. Это простая настройка задачи styles, которую я нашел в одном из уроков:

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');
});

Затем в главном файле .scss я помещаю импорт:

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

Эта задача выполняется правильно.

Что меня озадачивает, что именно делает includePaths? Основываясь на приведенном выше примере, может ли кто-нибудь объяснить мне, что такое includePath роль?

Ответы

Ответ 1

Компилятор SASS использует каждый путь в loadPaths при разрешении SASS @imports.

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

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

Обратите внимание, что компилятор разрешает каждый @import, рассматривая каждый путь в loadPaths слева направо (аналогично $PATH в среде UNIX). Пример сценария может быть:

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

В styles/i не было файла _x.scss, поэтому он перешел к styles/ii. В конце концов он нашел файл _x.scss в styles/iii и завершил поиск. Он просматривает каждую папку в loadPaths, начиная с первого элемента в массиве и перемещаясь вправо. После попытки всех путей, если мы не сможем найти файл, мы объявим, что этот оператор @import недействителен.

Пути загрузки полезны, если у вас есть внешняя библиотека (например, bournon/neat). Внешняя библиотека большая и будет использовать множество операторов @import. Однако они не будут соответствовать вашей структуре папок проекта и поэтому не будут разрешаться. Однако вы можете добавить дополнительные папки в loadPaths, чтобы @imports внутри внешней библиотеки разрешали.

Ответ 2

INCLUDEPATHs

Тип: Array По умолчанию: []

Массив путей, которые может использовать libsass, чтобы попытаться разрешить ваши объявления @import. При использовании данных рекомендуется использовать это.

в sass, вы можете orginize ваш sass файл в папке разницы, но вы хотите, чтобы main.sass мог импортировать их при компиляции, поэтому вы можете указать includePaths, чтобы sass знал, где найти @import sass file, здесь вы используете node-neat, если вы хотите импортировать из него какой-то стиль, по умолчанию sass не знает, куда импортировать, поэтому вам нужно сказать sass, где найти файл @import