Gatsby Build Breaks SCSS Export Variables

Question

I have a SCSS variables file which has:

$brandColorAnchor: #14314e;

:export {
  brandColorHighlight: $brandColorHighlight;
}

And then in my JavaScript file I am passing these variables to Material UI, but the variables are seem to be coming in undefined. The build throws an error saying that each color in material UI needs main defined.

import { createMuiTheme } from "@material-ui/core/styles"
import Variables from "../styles/variables.scss"

const Theme = createMuiTheme({
  palette: {
    primary: {
      main: Variables.brandColorHighlight
    }
  }
})

export default Theme

This error only happens on gatsby build and not on gatsby develop.