我正在尝试从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