sass - 将所有 sass 文件合并到一个文件中

Question

gulp-sass 中是否有任何选项可以组合 sass 文件？

例如：

主要.scss：

$var: red;

控制.scss：

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

组合的输出文件应该是单个 scss 文件，如下所示

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

Answer 1

你尝试过这样的事情吗？

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

这应该会在./dist/all.scss.

我不知道@import语句是否被正确处理，但这些问题通常由临时模块（例如gulp-sass）处理，这些模块会产生.css输出......

Answer 2

这是解决方案，完整的证明解决方案。您还需要使用 gulp-scss-combine。

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

你可以在这里玩代码。代码，基本上做同样的事情，但不是在 gulp 中，而是在 node.js 标准应用程序中。只需删除 all.scss 文件或其内容，然后运行程序。你会看到结果。

Answer 3

您必须执行一个文件来导入所有其他 scss 文件，但是当您监听更改时，您必须监听 scss 目录中所有文件的更改。

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