Gatsby 在使用带有 '@use 'sass:color' 的 Sass 文件后失败

我正在建立一个盖茨比项目gatsby-plugin-sass.

my gatsby-config.js file:

module.exports = {
  plugins: [
    'gatsby-plugin-resolve-src',
    'gatsby-plugin-sass',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
  ],
}

我有以下款式文件结构:

|
|src
|-styles
|--base
|--- _variables.scss
|--components
|--- _Buttons.scss
|--- ...
|--main.scss

Im my _Buttons.scss文件我是输入像这样：

@import '../base/variables';
@use 'sass:color as *;

当我尝试使用sass 颜色函数像这样（如指定https://sass-lang.com/documentation/modules https://sass-lang.com/documentation/modules)

%buttons-focus {
  background-color: color.adjust($primary-color, $alpha: -0.5);
}

我收到以下错误：

Invalid CSS after "...nd-color: color": expected expression (e.g. 1px, bold), was ".adjust($primary-co"

在我的 main.scss 中，我导入如下样式：

@import './components/Buttons';

我在监督什么吗？ 我尝试过改变@use with @import，没有运气。对我来说， gatsby-sass-plugin 似乎不知道 sass 模块。

gatsby-plugin-sass uses node-sass在引擎盖下。但为了支持带有@use的内置模块，你需要配置gatsby-plugin-sass to use dart-sass反而。见下文。

内置模块 - sass-lang https://sass-lang.com/documentation/modules

目前只有 Dart Sass 支持使用 @use 加载内置模块。其他实现的用户必须使用其全局名称来调用函数。

替代 Sass 实现 - gatsby-plugin-sass https://www.gatsbyjs.org/packages/gatsby-plugin-sass/#alternative-sass-implementations

默认情况下使用 Sass 的节点实现 (node-sass)。要使用用 Dart (dart-sass) 编写的实现，您可以安装 sass 而不是 node-sass 并将其作为实现传递到选项中：

npm install --save-dev sass

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("sass"),
    },
  },
]