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

Posted 2023-03-07

【中文标题】如何使用 gulp 从 node_modules 导入 bootstrap 4 sass/scss

【英文标题】：How to import bootstrap 4 sass/scss from node_modules using gulp

【发布时间】：2017-11-26 07:57:47

【问题描述】：

我正在尝试从 node_modules 中 @import 一些 bootstrap 4 sass 文件，但我的 gulp watcher 没有对这些 node_modules 引导文件进行任何更改。

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

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

我获取引导文件的关键部分是使用 includePaths 部分。

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

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

我尝试将 includePaths 更新为：

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

但这会引发错误，“找不到要导入的文件”（bootstrap-grid），这对我来说也很奇怪，因为它似乎应该在 bootstrap/ 中添加/监视 sass 文件（和任何子目录） scss。

此时我的文件结构很简单：

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

【问题讨论】：

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

好的，是的，这很公平，我同意。我只是想弄清楚如何从不同目录中的 sass 文件中重新编译。

你不必这样做，如果你的 scss 文件中已经存在导入，sass 编译器会处理这个问题。

这就是我的问题的重点，当我在 node_modules 中对 bootstrap 的 _custom.scss 进行更改时，它没有被重新编译。我的“本地” src/css/scss 文件是。回过头来看，我的示例并不是最好的，因为正如您所指出的，您不想编辑 node_modules 中的文件，但我只是想弄清楚为什么我不能在 src/css 之外编译保存文件/scss

【参考方案1】：

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

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

希望对您有所帮助。