sass 中的规则 @use 使用 gulp 编译不正确

Question

我用gulp。我的 gulpfile.js:

"use strict";

const gulp = require("gulp");
const sass = require("gulp-sass");
const browserSync = require("browser-sync").create();
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const concat = require("gulp-concat");

sass.compiler = require("node-sass");

function generateCSS() {
  return gulp
    .src("app/scss/**/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
    .pipe(concat("styles.css"))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("app/css"))
    .pipe(browserSync.stream());
}

function watchFiles() {
  browserSync.init({
    server: {
      baseDir: "app",
    },
  });
  gulp.watch("app/scss/**/*.scss", generateCSS);
  gulp.watch("app/*.html").on("change", browserSync.reload);
}

exports.css = generateCSS;
exports.watch = watchFiles;

exports.default = gulp.series(generateCSS, watchFiles);

当我使用 at-rule @use 时，出现错误 - https://monosnap.com/file/nAfh13fp9WsgfDetNmJ4F57dYEgVXk

我的代码 - https://monosnap.com/file/ucW4I8ehPDPQojdZYJSQmI4jbMOJpi

我不明白为什么会这样。

我需要你们的帮助。非常感谢。

Answer 1

此错误是由于 node-sass 尚未支持 sass 的 @use。您可以查看 node-sass 的 issue 2886.

AFAK，您应该将 gulp-sass 的编译器更改为 Dart Sass，Sass 的主要实现，它支持所有新的 sass 功能。您可以查看文档 here.

- sass.compiler = require("node-sass");
+ sass.compiler = require("sass");

sass 中的规则 @use 使用 gulp 编译不正确

At-rule @use in sass compiles incorrectly using gulp

sass

gulp