Kombinieren Sie alle Sass-Dateien in einer einzigen Datei

Question

Gibt es in Gulp-Sass eine Option zum Kombinieren von Sass-Dateien?

Zum Beispiel:

main.scss:

$var: red; 

control.scss:

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

Die kombinierte Ausgabedatei einzelne SCSS Datei wie unten

sein sollte

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

Answer 1

Haben Sie so etwas versucht?

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/')); 
}); 

Dies sollte eine einzige kombinierte SCSS in ./dist/all.scss produzieren.

Ich weiß nicht, ob @import Aussagen richtig gehandhabt werden, aber diese Probleme werden in der Regel behandelt durch Ad-hoc- Module (zB gulp-sass), die eine .css Ausgabe erzeugen ...

Answer 2

Sie müssen eine Datei ausführen, die alle anderen scss-Dateien importiert, aber wenn Sie die Änderungen abhören, müssen Sie die Änderungen aller Dateien im Verzeichnis scss abhören.

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']);  
    });