Storybook 7 Sass-Loader Undefined Variable Issue

Question

I'm building a React component library with Storybook 7 and TypeScript. I have my Storybook addon-styling-webpack in .storybook/main.ts configured to load scss resources with sass-resource-loader. This loads a global.styles.scss file with variables and base scss styles for use across the application. The setup works in that Storybook builds successfully and the variables and other global styles are applied correctly.

If I change a variable name, say $color-primary to $color-prim, I get an expected undefined variable error in the console. However, if I correct the spelling and put it back to $color-primary, the error in the console persists, even though Storybook builds properly again and applies the correct styling.

I've exhausted all SO articles with similar issues and need some help understanding what is going on. I imagine it could be a simple configuration issue that I'm missing.

Here is the error that persists in the console after purposely breaking the variable spelling and fixing it. It's not just variable spelling issues. Any breaking scss syntax causes errors to persist in the console even after fixing them, while Storyboard builds correctly. It's quite frustrating.

The Undefined Variable error I'm seeing is:

ERROR in ./src/components/Button/_button.styles.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[14].use[3]!./src/components/Button/_button.styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
   ╷
17 │   color: $color-black;
   │          ^^^^^^^^^^^^
   ╵
  src/styles/base.scss 17:10                     @import
  src/components/Button/_button.styles.scss 2:9  root stylesheet
 @ ./src/components/Button/_button.styles.scss 8:6-248 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-218 77:0-218 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./src/components/Button/Button.component.tsx 86:0-31
 @ ./src/components/Button/Button.stories.tsx 1:0-60 3:13-19 12:29-43 27:13-35 36:13-37 45:13-32 55:13-35 64:13-32 74:13-36
 @ ./src/ lazy ^\.\/.*$ include: (?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.stories\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$ chunkName: [request] namespace object ./components/Button/Button.stories.tsx ./components/Button/Button.stories
 @ ./storybook-stories.js 23:11-27:5
 @ ./storybook-config-entry.js 6:0-50 25:21-29 28:2-31:4 28:58-31:3 30:31-39

ERROR in ./src/global.styles.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[14].use[3]!./src/global.styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
   ╷
17 │   color: $color-black;
   │          ^^^^^^^^^^^^
   ╵
  src/styles/base.scss 17:10  @import
  src/global.styles.scss 2:9  root stylesheet
 @ ./src/global.styles.scss 8:6-229 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-199 77:0-199 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./.storybook/preview.ts 1:0-35
 @ ./storybook-config-entry.js 9:1258-1331 33:2-36:4 33:1242-36:3

preview compiled with 2 errors

Here's my Storybook main.ts:

import type { StorybookConfig } from "@storybook/react-webpack5";
import path from 'path';

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-themes",
    ({
        name: "@storybook/addon-styling-webpack",
        options: {
          rules: [
            {
              test: /\.scss$/,
              use: [
                  "style-loader",
                  "css-loader",
                  "sass-loader",
                  {
                    loader: "sass-resources-loader",
                    options: {
                      resources: [ 
                        path.resolve(__dirname, "../src/global.styles.scss" )
                      ]
                    }
                  }
              ],
            }
          ],
        }
    })
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {
      builder: {
        useSWC: true,
      },
    },
  },
  // address "React is not defined" error
  swc: () => ({
    jsc: {
      transform: {
        react: {
          runtime: "automatic"
        }
      }
    }
  }),
  typescript: {
    // required for JSDocs to work correctly
    reactDocgen: "react-docgen"
  },
  docs: {
    autodocs: "tag",
  }
};
export default config;

Storybook preview.ts:

import type { Preview } from "@storybook/react";

import '../src/global.styles.scss';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    docs: {
      toc: true
    }
  },
};

export default preview;