7

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.

nschonni
  • 4,069
  • 1
  • 28
  • 37
Makis K.
  • 877
  • 2
  • 9
  • 16

1 Answers1

6

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`],
    },
  },
},
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • 1
    You are right about the name of the attribute. It has to be `additionalData` but you have to put it outside of the `sassOptions` and inside `options` in order to work. – Makis K. Jan 26 '21 at 16:18
  • Thank you for your comment @MakisK. It did indeed need be be a level up in the options object rather than the sassOptions object. – 2pha Feb 15 '22 at 02:45