Gulp 未编译函数/遵循源顺序

Question

我的 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 顺序。任何帮助将不胜感激。

Answer 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'));

希望这对遇到这种情况的其他人有所帮助。

Gulp 未编译函数/遵循源顺序

Gulp not compiling function / following source ordering

sass

gulp

gulp-sass

gulp-concat