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

Posted 2023-02-22

【中文标题】sassOptions 中的数据选项在升级到 v3 并用 sass 替换 node-sass 后停止在 gatsby-plugin-sass 中工作

【英文标题】：data option in sassOptions stopped working in gatsby-plugin-sass after upgrading to v3 and replaced node-sass with sass

【发布时间】：2021-04-30 07:19:08

【问题描述】：

我决定从我的 gatsby 项目中删除 node-sass 并改用 sass。我按照 v3 中提到的 here 进行操作。我删除了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 和这个声明 (documentation) 有关，但我不知道如何使它工作以及为什么它以前工作：

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

【参考方案1】：

根据changelog，data 选项已重命名为prependData，然后删除以支持additionalData。所以：

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

【讨论】：

您对属性名称的看法是正确的。它必须是additionalData，但你必须把它放在sassOptions之外和options里面才能工作。