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

Question

我正在尝试从 node_modules @import 一些 bootstrap 4 sass 文件，但我的 gulp 观察器没有发现对这些 node_modules 引导文件的任何更改。

在我的主 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/中添加/监视 sass 文件(和任何子目录) scss.

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

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

Answer 1

尝试将 node_modules 中的 sass 文件添加到 gulp.watch:

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

希望对您有所帮助。