[style-loader] Unable to import css file for lazyStyleTag injection method?

[hailwood]

We're creating a web component that uses shadow dom.
We're attempting to follow this setup for style-loader.

Unfortunately when we run

import styles from './stylesheet.css';

We are getting

export 'default' (imported as 'styles') was not found in './stylesheet.css' (module has no exports)

We don't get any errors when we run

import './stylesheet.css';

But we also get...nothing happening.

We need to be able to import the stylesheet under a given name so we can hook it into our webcomponent with

styles.use(this.shadowRoot);

Here is our encore config file.

/** @type {Encore} */
const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore.setOutputPath('../../public/embed-react/');
Encore.setPublicPath('/embed-react');

Encore.addEntry('embed-react', './embed-react.js');

Encore.enableTypeScriptLoader();
Encore.enableReactPreset();

Encore.enablePostCssLoader(config => {
  config.postcssOptions = {
    ...config.postcssOptions,
    plugins: [
      ...(config.postcssOptions?.plugins ?? []),
      ['postcss-import', {}],
    ],
  };
});

Encore.configureBabel(config => {
  config.plugins.push('@babel/plugin-proposal-export-default-from');
  config.plugins.push('@babel/plugin-proposal-optional-chaining');
  config.plugins.push('@babel/plugin-proposal-nullish-coalescing-operator');
});


Encore.disableSingleRuntimeChunk();
Encore.cleanupOutputBeforeBuild();
Encore.enableSourceMaps(!Encore.isProduction());

Encore.configureStyleLoader(options => ({
  ...options,
  injectType: 'lazyStyleTag',
  insert: function insertIntoTarget(element, options) {
    const parent = options.target || document.head;
    parent.appendChild(element);
  },
}));

Encore.configureDevServerOptions(options => ({
  ...options,
  allowedHosts: 'all',
  client: {
    webSocketURL: 'wss://localhost:8080/ws',
  },
  https: {
    ...options.https,
    key: process.env.WEBPACK_KEY,
    cert: process.env.WEBPACK_CERT,
  },
}));

const config = Encore.getWebpackConfig();

config.output.crossOriginLoading = 'anonymous';
config.resolve.fallback = {...config.resolve.fallback, fs: false};
config.parallelism = 10;

module.exports = config;

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?