Angular 2 gulp任務將多個scss轉換爲單個css

Question

app 
-file1 
-- file1.ts 
-- file1.html 
-- file1.scss 

-file2 
-- file2.ts 
-- file2.html 
-- file2.scss 

-file3 
-- file3.ts 
-- file3.html 
-- file3.scss 

我的項目結構像這樣。 我想將我所有的scss文件轉換爲單個css文件。找角2一飲而盡任務

Answer 1

你應該導入一個單一的文件的所有文件這樣

-style.scss 
@import "includes/file2"; 
@import "includes/file3"; 

然後運行轉換一飲而盡

Answer 2

的命令試試下面的代碼。我基本上做的是將所有scss文件導入 單個文件（styles.scss），然後將其轉換。然後觀察scss文件中的任何更改以更新css

var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    concat = require('gulp-concat'); 
gulp.task('sass', function() { 
    return gulp.src('./scss/styles.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(concat('style.css')) 
     .pipe(gulp.dest('./www/css')); 
}); 
gulp.task('watch', function() { 
    gulp.watch('./scss/**/*.scss', ['sass']); 
});