Dynamic themes using CSS "override" files

[HJordan35]

Im looking for a strategy that allows me to optionally apply CSS "override" files to update the look and feel of components in storybook by simply swapping in a set of CSS that targets and overrides specific classes and variables.

CURRENT THINKING

Create Baseline Styles with CSS variables and SCSS
In my src directory, I have a /styles directory containing all SCSS for my components

Create series of "Override" directories containing mirrored directory structure to the Baseline Styles (above)
The thinking here is that a developer can easily create a new directory when they want to create their own set of overrides

Use addons-cssresources to easily swap between the various overrides
This was the best option I could find for swapping CSS without using "themes" - as this will not work for me as I am trying to isolate my react code from styles (for purposes of our Storybook use case)

THE CHALLENGE

[addons-cssresources] expects a string of CSS to be added as a property. Since I would like to have all of my SCSS encapsulated into each of the "override" directories, I need some way of transforming the SCSS into CSS and then extracting it as a string which can be interpolated into the addon configuration.

I currently have this working, but I am using inline loaders in order to get it to function (which is not best practice as far as I can tell).

import { withCssResources } from "@storybook/addon-cssresources";
import styles from "!!css-loader!sass-loader!../src/styles-overrides/clientA/styles/main.scss";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  cssresources: [
    {
      id: `client-overrides`,
      code: `<style>${styles}</style>`,
      picked: false,
      hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
    },
  ],
};

export const decorators = [withCssResources];

QUESTIONS

Despite the above approach appearing to work, I am worried about the inline loaders. I attempted trying to create a specific "rule" in my webpack config which used a resourceQuery, but I was getting strange SASS errors which I couldnt resolve on my own

Any general feedback on the approach above?
Any thoughts on improvements or help with the Webpack inline loaders?

Thanks in advance!