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文件中指定glob（在baseDir中），如下所示：

@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没有编译功能/关注源排序

1 个答案: