如何使用gulp从node_modules导入引导程序4 sass/scss
问题描述:
我正在尝试@import从node_modules引导一些引导程序4 sass文件,但是我的吞食观察程序未拾取对这些node_modules引导程序文件的任何更改。如何使用gulp从node_modules导入引导程序4 sass/scss
在我的主青菜文件我通过导入引导:
@import "bootstrap-grid";
@import "bootstrap-reboot";
@import "custom";
然后我也进口一些 “局部” SASS文件(node_modules外):
@import "some-file";
@import "some-other-file";
etc.
这些本地青菜文件看得很好,当我执行编辑/文件保存时,我会重新编译。
我顶嘴一饮而尽任务看起来是这样的:
//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 /引导/ SCSS/_custom.scss(我导入其中)放置引导覆盖英寸
我不太清楚在编辑/保存任何node_modules引导文件时如何获得bootstrap重新编译。
我尝试更新的includepaths到:
includePaths: ['node_modules/bootstrap/scss/**/*.scss']
但是,这将引发一个错误,“要导入的文件找不到”(引导格),这也似乎很奇怪我,因为它看起来像它应该被加入/在bootstrap/scss中查看sass文件(和任何子目录)。在这一点上
我的文件结构非常简单:
root
|
| node_modules
| bootstrap
| scss
| src
| css
| scss
gulpfile.js
答
尝试增加从node_modules的SASS文件gulp.watch:
gulp.watch([
'node_modules/bootstrap/scss/**/*.scss',
'src/css/scss/**/*.scss'
], ['sass']);
希望有所帮助。
定制存在于node_modules中的文件是一种不好的做法。你可以在导入引导文件后总是加载一个自定义的css文件来覆盖这些值 – karthick
好的,是的,这是公平的,我同意。我只是想弄清楚如何从不同目录下的sass文件重新编译。 –
你不需要,如果导入已经存在于你的scss文件中,sass编译器会照顾到这一点。 – karthick