在升级到v3版本并且将node-sass替换为sass后，gatsby-plugin-sass中sassOptions中的data选项停止工作

Question

我决定从我的gatsby项目中移除node-sass并改用sass。我遵循了v3中提到的这里的方法。我移除了node-sass，现在我在package.json中有以下版本：

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

我希望能够为全局变量/混合/函数编写一些@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和这个语句(documentation)有关，但我无法弄清楚如何让它工作以及为什么以前它可以工作:

ℹ️ 诸如data和file之类的选项不可用，并将被忽略。

- Makis K.

Answer 1

根据更新日志，data选项已被重命名为prependData，然后被additionalData取代。因此:

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

- Ferran Buireu

---

关于属性名称，你是正确的。它必须是additionalData，但你必须将其放在sassOptions之外，并放在options内才能正常工作。 - Makis K.

感谢您的评论@MakisK。确实需要在选项对象中进行升级，而不是sassOptions对象。 - 2pha