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

Question

我正在使用 gatsby-plugin-sass 建立一个 Gatsby 项目.

我的 gatsby-config.js文件:

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

我是我的 _Buttons.scss文件我是 进口 像这样:

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

当我尝试使用 sass 颜色函数 像这样(在 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与 @import ，没有运气。对我来说，gatsby-sass-plugin 似乎不知道 sass 模块。

Answer 1

gatsby-plugin-sass使用 node-sass在引擎盖下。但是为了支持带有@use的内置模块，你需要配置gatsby-plugin-sass使用 dart-sass反而。见下文。
Built-In Modules - sass-lang

Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.

Alternative Sass Implementations - gatsby-plugin-sass

By default the node implementation of Sass (node-sass) is used. To use the implementation written in Dart (dart-sass), you can install sass instead of node-sass and pass it into the options as the implementation:

npm install --save-dev sass

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