How to split css into bundles in webpack?

Question

css

The case is not standard. This is a React app with css-modules (scss). My app has multiple React apps.

const togglerRoot = root.querySelector(`#${TOGGLER_PSELECTOR}`)
const pagerRoot = root.querySelector(`#${PAGER_PSELECTOR}`)
render(<ChatCornerTogglerApplication />, togglerRoot)
render(<ChatCornerPagerApplication />, pagerRoot)

Each application inside is wrapped in an iframe, example:

const ChatCornerTogglerApplication: React.FC = () => {
  // ...
  return (
    <VendorFrame name="toggler" scrolling="no" style={style}>
      <Toggler shape={shape} text={text} style={{ backgroundColor: mainColor }} onClick={toggleCornerMode} />
    </VendorFrame>
  )
}

And inside each application there is its own chain of components, and each has its own styles. Like the component Toggler.
There are several tasks at once:
1. It is necessary that each component chain collects its style bands in a separate file, so that there are chat-corner-toggler-app.css2. chat-corner-pager-app.css
The application does not import these styles directly (standard behavior)
3. Somehow load these bundles into iframe's.

Solve at least 1 point

Answer 1

css into separate files can be built with style-loader, and to save them as files with file-loader for webpack
you need to change your webpack.conf.js
Something like this