How To Pass Env Vars to Sass Plugin in Gatsby?

Question

How do I pass environment variables to the gatsby-sass-plugin? I'd like to be able to pass an environment variable into the loader that I can then use in my scss files. This is not well documented and I'm not sure how to do it.

Reference: https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/

This does not work:

{
  resolve: "gatsby-plugin-sass",
  options: {
    additionalData: `$storeName: ${process.env.SHOPIFY_STORE_NAME};`
  }
},

Answer 1

According to this recent GitHub thread, those options are not directly valid as it:

Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

This is causing the options object to be undefined.

Try upgrading your gatsby-plugin-sass to:

[email protected]

Check your node-sass version too.