Gulp的includePaths有什么作用？

Question

我试图在我的项目中开始使用Bourbon和Neat Sass库.我想用Gulp编译Sass.这是一个简单的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角色是什么吗？

Answer 1

在解析SASS @imports时,SASS编译器使用loadPaths中的每个路径.

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

没有_x.scss文件styles/i,所以它继续向内看styles/ii.最终它找到了一个_x.scss文件styles/iii并完成了查找.它loadPaths从数组中的第一个元素开始查看每个文件夹并向右移动.尝试所有路径后,如果找不到该文件,则声明此@import语句无效.

如果您有外部库(如bournon/neat),则加载路径很有用.外部库很大,会使用大量的@import语句.但是它们与您的项目文件夹结构不匹配,因此无法解决.但是,您可以向loadPaths添加额外的文件夹,以便外部库中的@imports 可以解析.

Answer 2

的includepaths

类型:数组默认值:[]

libsass可以查找的路径数组,以尝试解析您的@import声明.使用数据时,建议您使用它.

在sass中,你可以在多个文件夹中安装你的sass文件,但你希望你的main.sass能够在编译时导入它们,所以你可以指定includePaths,以便sass知道在哪里找到@import sass file,在这里你可以使用node-neat,如果你想从它导入一些样式,默认情况下,sass不知道在哪里看,所以你需要告诉sass在哪里找到要导入的文件