Combina tutti i file sass in un singolo file

Question

Esiste qualche opzione disponibile in gulp-sass per combinare i file sass?

Ad esempio:

main.scss:

$var: red; 

control.scss:

@import 'main'; 
.a{ 
    color: $var; 
} 

Il file di output combinato dovrebbe essere unico file SCSS come qui di seguito

$var: red; 
.a{ 
    color: $var; 
} 

Answer 1

Hai provato qualcosa del genere?

gulp = require('gulp'); 
concat = require('gulp-concat'); 

// the default task 
gulp.task('default', function() { 
    return gulp.src('./*.scss') 
     .pipe(concat('all.scss')) 
     .pipe(gulp.dest('./dist/')); 
}); 

Questo dovrebbe produrre un singolo SCSS combinati in ./dist/all.scss.

Non so se @import dichiarazioni sono gestiti correttamente, ma questi problemi sono di solito gestiti da ad hoc moduli (per esempio, gulp-sass), che producono una potenza .css ...

Answer 2

È devi eseguire un file che importi tutti gli altri file scss, ma quando ascolti le modifiche, devi ascoltare le modifiche di tutti i file nella directory scss.

gulp.task('sass', function() { 
     // You have to execute one file that import all other scss files 
     return gulp.src('src/scss/*.scss') 
       .pipe(sass()) 
       .pipe(gulp.dest('build/css')); 
    }); 



gulp.task('watch', function() { 
     // You have to listen the all files in the scss directory 
     gulp.watch('src/scss/**/*.scss',['sass']);  
    });