Gulp 不编译函数/遵循源代码排序答案

【问题标题】：Gulp not compiling function / following source orderingGulp 不编译函数/遵循源代码排序
【发布时间】：2017-11-02 21:16:18
【问题描述】：

我的gulpfile.js中有以下内容

var baseDir = 'Base/Assets/scss/**/**';
var modulesDir = 'Modules/**/Assets/scss/*'; 

return gulp.src([baseDir + '*.scss', modulesDir + '*.scss'])
    .pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
    .pipe(concat('app.min.css'));

在 baseDir 中，我有一个 app.scss 文件，如下所示：

@import "node_modules/foundation-sites/scss/util/util";

@import "settings";
@import "foundation";

在util 中有一个名为rem-calc 的函数。我在我的Modules scss 文件中使用了这个函数，但这些文件从未执行过。相反，在输出的 css 中，我有以下 margin-top: rem-calc(10);，这实际上应该已转换为 rem。

我唯一能想到的是 Gulp 不记得 src 的顺序。任何帮助将不胜感激。

【问题讨论】：

var baseDir = 'Base/Assets/scss/**/';这有帮助吗？
不，baseDir 中的所有内容都会编译 find 并使用 rem-calc 函数。但是，modulesDir 中的所有内容都会编译，但不使用 rem-calc 函数。
我不知道你的目录结构，但是 var modulesDir = 'Modules/**/Assets/scss/**/';或 var modulesDir = 'Modules/**/Assets/scss/';可能有帮助。取决于您的特定目录结构。
如果有帮助，我的结构是 Modules/MODULENAME/Assets/scss/SCSSFILE.scss
问题是，它正在编译这些文件。只是它们内部的功能不起作用。如果我在每个文件中添加了 util 导入，它将起作用。但由于某种原因，在 baseDir 中定义一次，它在整个编译过程中都不起作用

标签： sass gulp gulp-sass gulp-concat

【解决方案1】：

我已经通过从 gulpfile 中删除 modulesDir 解决了这个问题，而是使用了一个名为 gulp-sass-glob 的新包

这允许我在我的app.scss 文件（在 baseDir 中）中指定 glob，如下所示：

@import "node_modules/foundation-sites/scss/util/util";

@import "settings";
@import "foundation";

// now import the modules
@import "../../../../Modules/**/Assets/scss/*.scss";

我的gulpfile.js 是这样的：

var baseDir = 'Base/Assets/scss/**/**';

gulp.task('site-css', function () {
    return gulp.src(baseDir + '*.scss')
        .pipe(sassGlob())
        .pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
        .pipe(concat('app.min.css'));

希望这可以帮助遇到这种情况的其他人。

【讨论】：