const csspath = path.resolve(__dirname,  './src/styles/main.scss');

{
    loader: 'sass-resources-loader',
    options: {
      resources: [csspath]
    }
}

$navBackground: $black;
$navForeground: $white;
$itemSize: 60px;

.NavHeader {
    position: sticky;
    top: 0;
    z-index: 1071;
    background-color: $navBackground;
    color: $navForeground;
    width: 100vw;
    height: $itemSize;
}

import './Header.style.scss';

$navBackground: $black;
$navForeground: $white;

background-color: $navBackground;
                 ^
  Undefined variable: "$navBackground".
  in /Users/bryanrasmussen/projects/dc_frontend/src/styles/components/_header.scss (line 8, column 23)