javascript - SASS 编译可以，但 Gulp 不行

Question

我刚刚开始使用 Gulp，但我似乎无法让它工作。当我运行常规 sass 命令时，一切都编译得很好。

这是我的 Gulp 文件:

//Gulp Dependencies
var gulp = require("gulp");
var log = require("fancy-log");

//Style Dependencies
var sourcemaps = require("gulp-sourcemaps");
var scss = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var cssnano = require("gulp-cssnano");

function scssTask() {
    return gulp.src(["../css/partial/*.scss",
        "../css/*.scss","])
        .pipe(sourcemaps.init())
        .on("end", function(){ 
            log("Sourcemap Complete...");
        })
        .pipe(scss())
        .on("end", function(){ 
            log("SASS Compiled...");
        })
        .pipe(autoprefixer())
        .on("end", function(){ 
            log("Autoprefixer Done...");
        })
        .pipe(cssnano())
        .on("end", function(){ 
            log("CSS Minified...");
        })
        .pipe(gulp.dest("../../dist/css")
        )
        .on("end", function(){ 
            log("SCSS Task Complete!");
        });
}

exports.default = gulp.series(scssTask);

当我运行它时，出现以下错误:

[05:12:57] Using gulpfile /path/to/gulpfile
[05:12:57] Starting 'default'...
[05:12:57] Starting 'scssTask'...
[05:12:57] 'scssTask' errored after 26 ms
[05:12:57] Error in plugin "gulp-sass"
Message:
    ../css/coming-soon.scss
Error: no mixin named background
        on line 4 of ../css/coming-soon.scss
>>   @include background($images + "blurground.jpg");
   -----------^

Details:
    status: 1
    file: /var/www/pickle.codes/src/css/coming-soon.scss
    line: 4
    column: 12
    formatted: Error: no mixin named background
        on line 4 of ../css/coming-soon.scss
>>   @include background($images + "blurground.jpg");
   -----------^

    messageFormatted: ../css/coming-soon.scss
Error: no mixin named background
        on line 4 of ../css/coming-soon.scss
>>   @include background($images + "blurground.jpg");
   -----------^

    messageOriginal: no mixin named background
    relativePath: ../css/coming-soon.scss
    domainEmitter: [object Object]
    domainThrown: false

这是coming-soon.scss的相关部分

@use "partial/base.scss" as *;

html {
  @include background($images + "image.jpg");
}
...

这是 _base.scss 的相关部分

$images: "/static/images/" !default;

@mixin background($background-image-path) {
  background: url($background-image-path) center center fixed;
}

其他遇到类似问题的人说他们没有用“_”命名他们的部分 scss 文件，但这不是我的情况，因为“_base.scss”实际上有一个下划线。我的下一个想法是，既然常规的 sass 命令正在工作，那一定是因为 Gulp 在coming-soon.scss 之前没有编译 _bass.scss，所以我将 _base.scss 移动到它自己的文件夹中，并放入新的“部分”文件夹数组中的第一个。但这似乎没有帮助。

提前致谢，如果最终结果是我只是捏造了一个分号或其他东西，抱歉:P

Answer 1

您的 _base.scss 文件是否导入到 main.scss 文件中？ Gulp 找不到你的 mixin。为了确保您的部分内容按正确的顺序导入，我建议使用 main.scss 文件并 gulp 该文件。

对于基于 7-1 架构模式的优秀 sass 样板:https://github.com/HugoGiraudel/sass-boilerplate

更具体地说，main.scss 文件: https://github.com/HugoGiraudel/sass-boilerplate/blob/master/stylesheets/main.scss