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

这里是相关部分即将到来-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 在出现之前没有编译 _bass.scss-soon.scss，所以我移动了 [=32] =] 到它自己的文件夹并将新的 "partial" 文件夹放在数组的第一位。但这似乎没有帮助。

提前致谢，如果结果是我只是捏造了一个分号或其他东西，我很抱歉：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 指令，因此不包括您的 _base.scss定义 mixin 的文件。

目前 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

然后在您的 gulp 文件中，您可以将其设置为 gulp-sass:

使用的编译器

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

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

SASS 编译有效，但 Gulp 无效

SASS Compilation works, but Gulp doesn't

javascript

css

sass

node.js

gulp