Question

gulp-sass中有没有可用的选项来组合sass文件？

例如：

main.scss：

$var: red;

control.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中生成单个组合的scss。

我不知道是否正确处理了@import语句，但这些语句问题通常由 ad-hoc 模块处理（例如，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);

您可以在此处使用代码。 code，基本上做同样的事情，但不是在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']);     
  });

将所有sass文件合并为一个文件

3 个答案: