将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

这是我的gulpfile的一部分：

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

在common.scss中有不同的变量。来自common.scss的变量必须在每个模块中使用（news.scss，login.scss）。如何更新我的gulpfile，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指令。