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编译器在解析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

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

如果您有外部库（如bournon / neat），则加载路径非常有用。外部库很大，会使用大量的@import语句。但是，它们不符合您的项目文件夹结构，因此无法解决。但是，您可以向loadPaths添加额外的文件夹，以便外部库中的@imports 解析。

Answer 2

的includepaths

类型：数组默认值：[]

libsass可以查看的路径数组，以尝试解析您的@import声明。使用数据时，建议您使用此数据。

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

Gulp的includePaths有什么作用？

2 个答案: