如何使用gulp从node_modules导入引导程序4 sass/scss

Question

我正在尝试@从node_modules中导入一些引导4 sass文件，但是我的gulp观察者并没有对这些node_modules引导文件进行任何更改。

在我的主sass文件中，我将通过以下方式导入引导程序：

@import "bootstrap-grid";
@import "bootstrap-reboot";
@import "custom";

然后，我还导入了一些“本地”sass文件(在node_modules之外)：

@import "some-file";
@import "some-other-file";
etc.

这些本地sass文件被很好地监视，当我进行编辑/文件保存时，我会重新编译。

我的狼吞虎咽的任务是这样的：

//compile sass
gulp.task('sass', function() {
    return gulp.src('src/css/scss/**/*.scss')
        .pipe(sass({
            includePaths: ['node_modules/bootstrap/scss/']
        }))
    .pipe(gulp.dest('src/css/'));
});

对于我来说，获取引导文件的关键部分是使用includePaths部件。

我正在获得引导网格，我想要做的是更新节点_模块/引导/scss/_custom.scss(我正在导入它)，将引导重写放在其中。

在编辑/保存任何node_modules引导文件时，我不太确定如何重新编译引导程序。

我尝试将includePaths更新为：

includePaths: ['node_modules/bootstrap/scss/**/*.scss']

但这会引发一个错误，“文件导入没有找到”(引导网格)，这在我看来也很奇怪，因为它似乎应该在引导/scss中添加/监视sass文件(和任何子目录)。

在这里，我的文件结构非常简单：

root
  |
  | node_modules
      | bootstrap
         | scss
  | src
      | css
         | scss
gulpfile.js

Answer 1

尝试将sass文件从node_modules添加到gulp.watch：

    gulp.watch([
        'node_modules/bootstrap/scss/**/*.scss', 
        'src/css/scss/**/*.scss'
    ], ['sass']);

希望这能有所帮助。