Gulp 将scss文件与许多其他scss文件连接在一起

我有下一个文件结构：

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中有不同的变量。每个模块（news.scss、login.scss）都必须使用common.scss中的变量。如何更新我的gulpfile，使common.scss与每个模块scss文件连接？

听起来像是流阵列的工作。。。以下是解决方案，请查看评论以了解发生的情况：

var merge=require（'merge2'）；
var glob=需要（“glob”）；
var gulp=需要（“gulp”）；
var concat=需要（“咕噜咕噜咕噜”）；
var sass=需要（'gulp-sass'）；
吞咽任务（'样式'），功能（完成）{
//首先，我们像处理gulp.src一样对文件进行全局处理
glob（'modules/list/***/.scss'，函数（er，文件）{
//对于这些文件中的每一个，我们都创建一个新的stram
var tasks=files.map（函数（文件）{
//这给了我们concat的名称，它是相同的
//作为原始文件的名称
var concatStr=file.substr（'modules/list/'.length）
//我们加载common.scs和我们的文件
返回gulp.src（['modules/common/common.scss'，file]）
//连接它
.管道（concat（concatStr））
});
//我们把所有的溪流汇合在一起
合并（任务）
//用粗鲁的话来教训他们
.pipe（sass（））
//把它们保存在我们想要的地方
.管道（大口目的地（“模块/列表”）；
//~fin
完成（）；
});
});

---

不过，您可能需要查看Sass的

@import

指令。

我不想使用Sass的@import指令，因为需要在每个文件中手动使用此指令。您的解决方案看起来不错，但性能如何？很难说。。由于双重全球化（第二个更快、更难），会有一些开销，但其余的应该可以解决。Merge并行运行，因此它实际上可能会稍微提高您的速度