如何使用gulp从node_modules导入bootstrap 4的sass / scss？

Question

我正在尝试从node_modules导入一些bootstrap 4 sass文件，但我的gulp watcher没有捕捉到对这些node_modules bootstrap文件的任何更改。

在我的主要sass文件中，我通过以下方式导入bootstrap：

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

然后我还引入了一些“本地”的sass文件（不在node_modules中）：

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

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

我的Sass Gulp任务如下:

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

对我来说选择Bootstrap文件的关键部分是使用includePaths部分。

我正在获取Bootstrap网格，我想要做的是更新node_modules / bootstrap / scss / _custom.scss（我正在导入），以放置Bootstrap覆盖。

我不太确定如何在编辑/保存任何node_modules Bootstrap文件时重新编译Bootstrap。

我尝试更新includePaths到：

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

但是，这会抛出一个错误，"文件未找到" (bootstrap-grid)，对我来说也很奇怪，因为它似乎应该在 bootstrap/scss 中添加/观察 sass 文件（以及任何子目录）。

此时，我的文件结构非常简单：

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

- magenta placenta

---

在 node_modules 中自定义文件是一种不好的做法。您可以在导入 Bootstrap 文件后始终加载自定义 CSS 文件以覆盖这些值。 - karthick

好的，没问题，我同意。我只是在尝试弄清楚如何重新编译存在不同目录中的sass文件。 - magenta placenta

如果你的SCSS文件中已经存在引入，Sass编译器将会自动处理。 - karthick

这就是我问题的关键，当我在node_modules中修改bootstrap的_custom.scss时，它没有被重新编译。而我的“本地”src/css/scss文件却可以。回想一下，我的例子并不是最好的，因为正如你所指出的，你不希望编辑node_modules中的文件，但我只是想弄清楚为什么我不能在src/css/scss之外的文件上进行保存时编译。 - magenta placenta

Answer 1

尝试将来自node_modules的sass文件添加到gulp.watch中：

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

希望这有所帮助。

- Mustak Yaqub