Make named import of Sass file available as a string - reactjs

Question

I'm building a web component in React and need to pass my compiled component styles, which are written in Sass, into the the component's <style> tag as a string.
Component code:
<MyWebComponent> is already successfully set up to make the component's shadow using ReactShadow
It's currently working if I use a compiled CSS file using this import statement:
import componentCSS from '!!css-loader!./my-component/index.css';
I need:
to use an SCSS file in that import
to do away with the inline !!css-loader! loader config syntax in the component code
import componentCSS from './my-component/index.scss';
...
render() {
return (
<MyWebComponent shadowStyles={[componentCSS]}> // componentCSS needs to be a string
<h1>Hello Web Component</h1>
</MyWebComponent>
);
}
If I console.log(componentCSS), I get an empty object {}.
the style bits of Webpack config:
...
{
test: /\.scss$/,
include: [
path.resolve(__dirname, './web-components'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{
loader: 'resolve-url-loader',
options: { sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true, outputStyle: 'compressed' }
},
{
loader: '#epegzz/sass-vars-loader',
options: {
syntax: 'scss',
files: [path.resolve(__dirname, './scss/index.scss')]
}
}
]
},
{
test: /\.css$/,
include: path.resolve(__dirname, './web-components'),
use: [
'raw-loader'
]
},
...
I've explored making a custom loader to no success, like trying to replace the import string in the component code with the working inline loader syntax:
// my-loader.js / Custom webpack loader
module.exports = function(content) {
content = content.replace(
"import componentCSS from './my-component/index.scss'",
`import componentCSS from '#epegzz/sass-vars-loader?syntax=scss&files[]=${path.resolve(__dirname, './scss/index.scss')}!sass-loader!css-loader!./my-component/index.scss'`
)
return content;
};
Before I go too far down the custom loader rabbit hole, is there a config option or syntax change that is possible to make it work?