Combine all sass files into a single file

Question

Is there any option available in gulp-sass to combine sass files?

For example:

main.scss:

$var: red;

control.scss:

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

The combined output file should be single scss file like below

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

Answer 1

Did you try something like this?

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

This should produce a single combined scss in ./dist/all.scss.

I don't know if @import statements are handled correctly, but these issues are usually handled by ad-hoc modules (for example, gulp-sass), which produce a .css output...

Answer 2

Here is solution, full proof solution. You need to use gulp-scss-combine as well.

(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);

You can play with code here . code , basically doing same thing but not in gulp but a node.js standard application. just delete all.scss file or its content, then run the program. you will see the result.