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

Question

我决定删除 node-sass来自我的 gatsby 项目并使用 sass反而。我遵循了所提到的here对于 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 *;`,
    },
  },
},

如果我插入规则 @use 'globals' as *;在每个 scss 文件中，错误都会消失，一切都按预期工作，但我不想插入这一行并修改我所有的 sass 文件。
我很确定这个问题与 sass-loader 有关。和这个声明( documentation )，但我不知道如何使它工作以及为什么它以前有效:

ℹ️ Options such as data and file are unavailable and will be ignored.

Answer 1

根据changelog , data选项已重命名为 prependData然后删除支持 additionalData .所以:

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