Tüm sass dosyalarını tek bir dosyada birleştir

Question

Sass dosyalarını birleştirmek için gulp-sass'da herhangi bir seçenek var mı?

main.scss:

$var: red; 

control.scss:

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

birleştirilmiş çıktı dosyası olmalıdır tek SCSS dosyası

aşağıdaki gibi örneğin

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

Answer 1

Böyle bir şey denediniz mi?

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

Bu ./dist/all.scss tek bir kombine SCSS üretmelidir.

@import ifadeleri doğru şekilde işlenir eğer bilmiyorum ama bunlar sorunlar genellikle tarafından işlenir ad-hoc modülleri bir .css çıktı üretmek (örneğin, gulp-sass), ...

Answer 2

Sen Diğer tüm scss dosyalarını içe aktaran bir dosyayı yürütmek zorundasınız, ancak değişiklikleri dinlediğinizde, scss dizinindeki tüm dosyaların değişikliklerini dinlemelisiniz.

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