Combine all sass files into a single file

问题

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

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

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

回答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']);     
  });

来源：https://stackoverflow.com/questions/37133297/combine-all-sass-files-into-a-single-file

标签

Sass

gulp

gulp-sass

node-sass