升级到v3后，sass中的data选项在gatsby-plugin-sass中停止工作，并用sass替换了node-sass [英] data option in sassOptions stopped working in gatsby-plugin-sass after upgrading to v3 and replaced node-sass with sass

问题描述

我决定从我的gatsby项目中删除 node-sass ，而改用 sass .我在此处中提到了v3.我删除了 node-sass ，现在我的 package.json 中有这些版本:

I decided to remove node-sass from my gatsby project and use sass instead. I followed what is mentioned here for v3. I removed node-sass and now I have these versions in my package.json:

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

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

I need to be able to write some @use or @import rules ONCE for global variables/mixins/functions so I can use them in all my scss files and so I won't have to repeat the same rules over and over again.

使用 node-sass 可以达到以下目的:

With node-sass something like this worked:

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

升级后， includePaths 属性确实起作用，但 data 无效，并且我从scss文件中收到有关丢失"消息的错误.变量:

After the upgrade, the includePaths attribute does work but the data does not and I get errors from my scss files about "missing" variables:

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

如果我在每个scss文件中插入规则 @use'globals'作为*; ，错误消失并且一切都按预期进行，但我不想插入此行并修改我的所有sass文件.

If I insert the rule @use 'globals' as *; in each scss file the errors disappear and everything works as expected but I don't want to insert this line and modify all my sass files.

我非常确定问题与 sass-loader 和此声明有关(文档)，但我不知道如何使它起作用以及为什么它以前起作用:

I am pretty sure that the issue has to do with sass-loader and this statement (documentation) but I can't figure out how to make it work and why it worked before:

ℹ️诸如数据和文件之类的选项不可用，将被忽略.

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

推荐答案

根据

According to the changelog, data option has been renamed to prependData and then removed in favor of additionalData. So:

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

这篇关于升级到v3后，sass中的data选项在gatsby-plugin-sass中停止工作，并用sass替换了node-sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！