Gulp的includePaths是做什么的？ [英] What does Gulp's includePaths do?

问题描述

我试图在我的项目中开始使用Bourbon和Neat Sass图书馆。我想用Gulp编译Sass。这是一个简单的样式任务设置，我在其中一个教程中找到：

  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：[ 'style']。concat（neat）
}））
 .pipe（gulp.dest（'./ dist / styles'））; 
}）; 
 
 gulp.task（'default'，function（）{
 gulp.start（'styles'）; 
}）; 
  

然后在主要 .scss 文件I放置导入：

  @importbourbon; 
 @importbase / base; 
 @import整洁; 
  

此任务正确执行。

这里令我感到困惑的是， includePaths 是否正确？
根据上面的例子，有人可以向我解释什么是 includePath 的作用是什么？

解决方案

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

  loadPaths： ['styles / foo'，'styles / bar'] 
 
 @importx; //通过./styles/foo/_x.scss找到
 @importy; //通过./styles/bar/_y.scss找到
  

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

  loadPaths：['styles / i'，'styles / ii'，'styles / iii' ，'styles / iv'] 
 
 @importx; //没有档案在./styles/i/_x.scss 
 //没有档案在./styles/ii/_x.scss 
 //在./styles/iii/_x找到档案。 scss ... 
 // ...此文件将用作导入
 // ...终止查找
 //文件./styles/iv/_x.scss将被忽略
  

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

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

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');
});

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

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

This task executes correctly.

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

解决方案

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

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

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.

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屋！