How to use a SCSS color variable in a Material UI and Gatsby site?

Question

Trying to figure out how to use a color variable from a SCSS file I keep getting an error:

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

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

• options has an unknown property 'data'. These properties are valid: object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

File: src/styles/main.scss

I've followed the Gatsby docs and I've installed gatsby-plugin-sass and added it to gatsby-config.js:

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

I've added the following to gatsby-browser.js:

// SCSS
import './src/styles/main.scss'

I've tried to bring it in my component:

import React from 'react'
import PropTypes from 'prop-types'

// Material UI
import { AppBar, Toolbar, makeStyles } from '@material-ui/core'

// Components
import Logo from './logo'
import Navigation from './navigation'

const useStyles = makeStyles(() => ({
  toolbar: {
    background: $FooBar,
    display: 'flex',
    justifyContent: 'flex-end',
  },
  navigation: {
    display: 'flex',
  },
}))

const Header = ({ title, menu }) => {
  const { toolbar, navigation } = useStyles()

  return (
    <>
      <AppBar>
        <Toolbar className={toolbar}>
          <Logo name={title} />
          <Navigation className={navigation} menu={menu} />
        </Toolbar>
      </AppBar>
    </>
  )
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

and I tried to import it directly into the component with:

import '../styles/main.scss'

Research

Include sass in gatsby globally:

    {
      resolve: `gatsby-plugin-sass`,
      options: {
        data: `@use "${__dirname}/src/styles/main.scss";`,
      },
    },

import style from '../styles/main.scss'
const useStyles = makeStyles(() => ({
  toolbar: {
    background: style.FooBar,
    display: 'flex',
    justifyContent: 'flex-end',
  },
  navigation: {
    display: 'flex',
  },
}))

• Import sass variables to gatsby component
• Gatsby Build Breaks SCSS Export Variables
• How to include SCSS Glob in a Gatsby project?
• Gatsby fails after using Sass files with '@use 'sass:color'

import style from '../styles/main.scss'
const useStyles = makeStyles(() => ({
  toolbar: {
    background: style.FooBar,
    display: 'flex',
    justifyContent: 'flex-end',
  },
  navigation: {
    display: 'flex',
  },
}))

{
  resolve: `gatsby-plugin-sass`,
  options: {
    implementation: require('sass'),
  },
},

I do not get a build error in the terminal but the background color passed to the component doesn't show up.

In a Gatsby site with Material UI how do I bring in a SCSS color variable to use within a component?

Broken down basic variation of what I've tried to do:

Answer 1

Have you tried changing this:

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

To this:

{
      resolve: 'gatsby-plugin-sass',
      sassOptions: {
         data: `@import "${__dirname}/src/styles/main.scss";`,
      },
    },

It seems that node-sass has some deprecated dependencies, so alternatively to this workaround, you can try upgrading your plugin package to the 3.0.0 version.