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

gulp sass中是否有组合sass文件的选项

例如：

main.scss:

$var: red;

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

control.scss:

$var: red;

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

组合输出文件应为单个scss文件，如下所示

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

---

你试过这样的吗

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

中生成单个组合的SCS

我不知道是否正确处理了

@import

语句，但是

---

问题通常由特设模块（例如）处理，这些模块会生成一个

.css

输出…

您必须执行一个文件来导入所有其他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']);     
  });

---

这是解决方案，完全证明的解决方案。您还需要使用gulp scss联合收割机

(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标准应用程序。只需删除所有.scss文件或其内容，然后运行程序。您将看到结果。

谢谢您的更新。您的代码编译为css文件，但输出应该是我期望的scss文件。对不起：为什么要在输出中使用

scss

？您通常希望将css输出到公共…是的，我可以在目标中获取css文件，但我也需要提供scss文件，以便他们可以手动编辑和编译。是的，对不起。。。要按你的要求做，它应该足够

gulp.src+concat+gulp.dest

。。。请参阅我的更新答案…正如您提出的那样，此解决方案不支持

@import

语句。这对组件库非常有用，而不是只提供编译后的.css文件。Repl.it链接非常有助于了解

gulp scss combine

的情况，因为repo没有太多文档：