Question

我试图从node_modules @import一些bootstrap 4 sass文件，但我的gulp观察者并没有接受对这些node_modules引导程序文件的任何更改。

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

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

然后我也导入一些＆＃34; local＆＃34; 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引导程序文件时，我不太确定如何让引导程序重新编译。

我尝试将includePath更新为：

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

但是会抛出一个错误，＃34;要导入的文件未找到＆＃34; （bootstrap-grid）这对我来说也很奇怪，因为它似乎应该在bootstrap / scss中添加/观看sass文件（和任何子目录）。

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

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

希望有所帮助。

如何使用gulp

1 个答案: