sass - sassOptions 中的 data 选项在升级到 v3 并用 sass 替换 node-sass 后停止在 gatsby-plugin-sass 中工作

Question

我决定node-sass从我的 gatsby 项目中删除并sass改用。我遵循了这里提到的 v3 的内容。我删除了node-sass，现在我有这些版本package.json：

"gatsby-plugin-sass": "3.1.0",
"sass": "1.32.5",

我需要能够为全局变量/mixins/函数编写一些@use 或@import 规则，这样我就可以在我所有的scss 文件中使用它们，这样我就不必一遍又一遍地重复相同的规则。

有了node-sass这样的工作：

{
  resolve: `gatsby-plugin-sass`,
  options: {
    includePaths: [`${__dirname}/src/styles`],
    data: `@import "globals.scss";`,
  },
},

升级后，该includePaths属性确实有效，但data没有，我从我的 scss 文件中收到有关“缺失”变量的错误：

{
  resolve: `gatsby-plugin-sass`,
  options: {
    sassOptions: {
      includePaths: [`${__dirname}/src/styles`],
      data: `@use 'globals' as *;`,
    },
  },
},

如果我在每个 scss 文件中插入规则@use 'globals' as *;，错误就会消失，一切都按预期工作，但我不想插入这一行并修改我所有的 sass 文件。

我很确定这个问题sass-loader与这个声明（文档）有关，但我不知道如何使它工作以及为什么它以前工作：

ℹ️数据和文件等选项不可用，将被忽略。

Answer 1

根据变更日志，data选项已重命名为prependData，然后删除为additionalData. 所以：

{
  resolve: `gatsby-plugin-sass`,
  options: {
    additionalData: `@use 'globals' as *;`,
    sassOptions: {
      includePaths: [`${__dirname}/src/styles`],
    },
  },
},