Gulp的includePaths是什么？

Question

Gulp的includePaths是什么？

25

我想在我的项目中开始使用 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的作用吗？

- luqo33

2个回答

7

includePaths

类型：数组默认值：[]

一个路径数组，libsass可以查找以解决@import声明。使用data时，建议使用此选项。

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

- Sean

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Lawson · Accepted Answer

SASS编译器在解析SASS @import指令时，会使用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语句无效。

loadPaths非常有用，特别是当你使用外部库（比如bournon/neat）时。外部库很大并且会使用很多@import语句。但是它们可能与你的项目文件夹结构不匹配，因此无法解析。但是，你可以将额外的文件夹添加到loadPaths中，以便解析外部库内部的@import语句。