Сделать именованный импорт файла Sass доступным в виде строки

Question

Я создаю веб-компонент в React, и мне нужно передать стили скомпилированного компонента, написанные на Sass, в тег <style> компонента в виде строки.

Код компонента: <MyWebComponent> уже успешно настроен для создания тени компонента, используя ReactShadow

В настоящее время это работает, если я использую скомпилированный файл CSS с помощью этого оператора import:

import componentCSS from '!!css-loader!./my-component/index.css';

Мне нужно:

• для использования файла SCSS в этом import
• избавиться от встроенного !!css-loader! синтаксиса конфигурации загрузчика в коде компонента

import componentCSS from './my-component/index.scss';

...

render() {
  return (
    <MyWebComponent shadowStyles={[componentCSS]}> // componentCSS needs to be a string
      <h1>Hello Web Component</h1>
    </MyWebComponent>
  );   
}      

Если я console.log(componentCSS), я получаю пустой объект {}.

биты стиля конфигурации Webpack:

...
{
      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'
      ]
    },
...

Я пытался создать собственный загрузчик безуспешно, например, пытаясь заменить строку импорта в коде компонента рабочим синтаксисом встроенного загрузчика:

// 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;
};

Прежде чем я зайду слишком далеко вниз по кроличьей норе нестандартного загрузчика, есть ли какая-либо опция конфигурации или изменение синтаксиса, которое может заставить его работать?