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;
}

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

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

Comments

[Yahwe Raj]

thanks for the update. Your code compiled as css file, but the output should be a scss file I expected.

[MarcoS]

Sorry: why do you want scss in output? You usually want to output css to public...

[Yahwe Raj]

Yeah I can get the css file in the destination, but I need to provide the scss file too, so that they can manually edit and compile them-self.

[MarcoS]

Yes, sorry... To do what you ask, it should suffice gulp.src + concat + gulp.dest... See my updated answer...

[yo.ian.g]

As you posed this solution does not honor @import statements.

[Rick Davies]

The Repl.it link is super helpful to figure out what is going on with gulp-scss-combine since the repo doesn't have too many docs: github.com/DeathMark/gulp-scss-combine