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

回答

相關問題