如何使用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

来源

2017-06-22 magenta placenta

定制存在于node_modules中的文件是一种不好的做法。你可以在导入引导文件后总是加载一个自定义的css文件来覆盖这些值 – karthick

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

你不需要，如果导入已经存在于你的scss文件中，sass编译器会照顾到这一点。 – karthick

尝试增加从node_modules的SASS文件gulp.watch：

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

希望有所帮助。

来源

2017-11-30 16:57:50

如何使用gulp从node_modules导入引导程序4 sass/scss

回答

相关问题