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 文件并吞下该文件。

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

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

Answer 2

找不到 background mixin，因为您使用的 Sass 编译器不支持 @use 指令，因此不包括定义 mixin 的 _base.scss 文件。

目前 gulp-sass 使用 sass-node 作为其默认编译器。 sass-node 是 LibSass 的绑定 which is deprecated 并且从未更新为支持 @use 指令。

您可以将 gulp-sass 设置为使用 Sass 的主要实现 Dart Sass。 Dart Sass 支持 @use 和 Sass 的其他最新功能。

安装 Dart Sass 作为活动项目的开发依赖项：

$ npm install dart-sass --save-dev

然后在您的 gulpfile 中，您可以将其设置为供 gulp-sass 使用的编译器：

const sass = require("gulp-sass");
const dartSass = require("dart-sass");
    
sass.compiler = dartSass;

在 LibSass 和 Dart Sass 之间有一些 compatibility differences 需要注意，如果您要在现有项目上交换编译器。