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

【问题标题】：Combine all sass files into a single file将所有 sass 文件合并到一个文件中
【发布时间】：2024-11-17 07:05:02
【问题描述】：

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

例如：

main.scss：

$var: red;

control.scss：

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

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

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

【问题讨论】：

这对组件库非常有用，而不是只提供一个编译好的 .css 文件。

标签： sass gulp gulp-sass node-sass

【解决方案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 中生成一个组合 scss。

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

【讨论】：

感谢您的更新。您的代码编译为 css 文件，但输出应该是我期望的 scss 文件。
抱歉：为什么要在输出中使用scss？您通常希望将 css 输出到公共...
是的，我可以在目的地获得css文件，但我也需要提供scss文件，以便他们可以手动编辑和编译它们。
是的，对不起...按照您的要求，它应该就足够了gulp.src + concat + gulp.dest...查看我的更新答案...
正如您提出的，此解决方案不支持@import 声明。

【解决方案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);

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

【讨论】：

Repl.it 链接非常有助于弄清楚 gulp-scss-combine 发生了什么，因为 repo 没有太多文档：github.com/DeathMark/gulp-scss-combine

【解决方案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']);     
  });

【讨论】：