Gulp 的 includePaths 有什么作用? [英] What does Gulp's includePaths do?

问题描述

我正在尝试在我的项目中开始使用 Bourbon 和 Neat Sass 库.我想用 Gulp 编译 Sass.这是我在其中一个教程中找到的简单 styles 任务设置:

I am attempting to start using Bourbon and Neat Sass libraries in my project. I want to compile Sass with Gulp. This is a simple styles task setup that I've found in one of the tutorials:

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 文件中放置导入:

Then in the main .scss file I place the imports:

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

此任务正确执行.

令我困惑的是 includePaths 究竟做了什么?根据上面的例子，谁能给我解释一下includePath的作用是什么?

What puzzles me here is what includePaths does exactly? Base on the example above, can somebody explain to me what includePath's role is?

推荐答案

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

The SASS compiler uses each path in loadPaths when resolving SASS @imports.

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

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

请注意，编译器通过从 left-to-right 考虑 loadPaths 中的每个路径来解析每个 @import(类似于 $PATHUNIX 环境).一个示例场景可能是:

Note that the compiler resolves each @import by considering each path in loadPaths from left-to-right (similar to $PATH in a UNIX environment). An example scenario could be:

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 语句无效.

There was no _x.scss file in styles/i, so it moved on to look inside styles/ii. Eventually it found an _x.scss file in styles/iii and finished the lookup. It looks at each folder in loadPaths starting from the first element in the array and moving right. After attempting all paths, if we can't find the file, then we declare that this @import statement is invalid.

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

Load paths is useful if you have a external library (like bournon/neat). The external library is large and will use lots of @import statements. However they won't match your project folder structure and so won't resolve. However, you can add an extra folders to the loadPaths so that the @imports inside the external library do resolve.

这篇关于Gulp 的 includePaths 有什么作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！