将Sass文件与'@use'sass：color'一起使用后，Gatsby失败

Question

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

我的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

我正在{strong>导入这样的我的_Buttons.scss文件：

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

当我尝试使用这样的颜色设置功能（在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

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

Alternative Sass Implementations - gatsby-plugin-sass

默认情况下，使用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"),
    },
  },
]