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...