将 scss 文件与许多其他 scss 文件连接起来

Question

我有下一个文件结构：

modules/
    list/
        news/
            news.scss
        login/
            login.scss
    common/
        common.scss

我想使用 gulp:

获得下一个结构

modules/
    list/
        news/
            news.scss
            news.css
        login/
            login.scss
            login.css
    common/
        common.scss

这是我的 gulp 文件的一部分：

gulp.src("modules/list/*/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("modules/list/"));

在common.scss中有不同的变量。来自 common.scss 的变量必须在每个模块中使用（news.scss、login.scss）。如何更新我的 gulp 文件，common.scss 将与每个模块 scss 文件连接？

Answer 1

听起来像是流数组的工作...这是解决方案，请查看评论以了解发生了什么：

var merge = require('merge2');
var glob = require('glob');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');

gulp.task('styles', function(done) {
    // first, we glob our files like we would with gulp.src
    glob('modules/list/**/*.scss', function(er, files) {
        // for each of those files we create a new stram
        var tasks = files.map(function(file) {
            // this gives us the concat name, which is the same
            // as the original file's name
            var concatStr = file.substr('modules/list/'.length)
            // we load common.scss and our file
            return gulp.src(['modules/common/common.scss', file])
            // concatenate it
                .pipe(concat(concatStr))
        });

        // we merge all our streams
        merge(tasks)
        // run them through sass
            .pipe(sass())
        // and save them where we want them
            .pipe(gulp.dest('modules/list'));
        // ~fin
        done();
    });
});

不过，您可能想看看 Sass 的 @import 指令。

将 scss 文件与许多其他 scss 文件连接起来

concatenating scss file with lots of other scss files

gulp