Combine all sass files into a single file - sass

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.

Answer 3

You have to execute one file that imports all other scss files, but when you listen the changes, you have to listen the changes of all files in the scss directory.
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']);
});