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

【问题标题】：At-rule @use in sass compiles incorrectly using gulpsass 中的规则 @use 使用 gulp 编译不正确
【发布时间】：2020-07-05 23:09:06
【问题描述】：

我使用 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

我不明白为什么会这样。

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

【问题讨论】：

标签： sass gulp

【解决方案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");

【讨论】：

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