data option in sassOptions stopped working in gatsby-plugin-sass after upgrading to v3 and replaced node-sass with sass

Question

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",

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.

With node-sass something like this worked:

{
  resolve: `gatsby-plugin-sass`,
  options: {
    includePaths: [`${__dirname}/src/styles`],
    data: `@import "globals.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 *;`,
    },
  },
},

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.

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.

question from:https://stackoverflow.com/questions/65902498/data-option-in-sassoptions-stopped-working-in-gatsby-plugin-sass-after-upgrading

Answer 1

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`],
    },
  },
},