web-dev-qa-db-fra.com

Combinez tous les fichiers Sass en un seul fichier

Existe-t-il une option disponible dans gulp-sass pour combiner des fichiers sass? 

Par exemple:

main.scss: 

$var: red;

control.scss: 

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

Le fichier de sortie combiné doit être un fichier scss unique, comme ci-dessous.

$var: red;
.a{
  color: $var;
}
sassgulpgulp-sassnode-sass
13
Yahwe Raj

Avez-vous essayé quelque chose comme ça?

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

Cela devrait produire un seul scss combiné dans ./dist/all.scss.

Je ne sais pas si les instructions @import sont traitées correctement, mais ces problèmes Sont généralement traités par les modules ad-hoc (par exemple, gulp-sass ), qui produisent une sortie .css .. .

10
MarcoS

Voici une solution, une solution complète. Vous devez également utiliser gulp-scss-combine.

(function(r){
    const gulp = r('gulp'); 
    const combine = r('gulp-scss-combine');
    const concat = r('gulp-concat');

    gulp.task('combine-scss', ()=>gulp.src('scss/**')  // define a source files
        .pipe(combine())   // combine them based on @import and save it to stream
        .pipe(concat('style.scss')) // concat the stream output in single file
        .pipe(gulp.dest('css'))  // save file to destination.
    );
})(require);

Vous pouvez jouer avec du code ici. code , faisant fondamentalement la même chose mais pas dans gulp mais dans une application standard node.js. supprimez simplement le fichier all.scss ou son contenu, puis exécutez le programme. vous verrez le résultat.

1
sorabh86