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

includePaths

Type: Array Default: []

An array of paths that libsass can look in to attempt to resolve your @import declarations. When using data, it is recommended that you use this.

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

Answer 2

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

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

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

请注意，编译器通过从 从左到右 考虑 loadPaths 中的每个路径来解析每个 @import（类似于 UNIX 中的 $PATH环境）。一个示例场景可以是：

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 中的内容。最终它在 styles/iii 中找到了一个 _x.scss 文件并完成了查找。它查看 loadPaths 中的每个文件夹，从数组中的第一个元素开始向右移动。尝试所有路径后，如果找不到文件，则声明此@import语句无效。

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

Gulp 的 includePaths 有什么作用？

What does Gulp's includePaths do?

sass

neat

bourbon

gulp