Как разделить css на бандлы в webpack?

Кейс не стандартный. Это React приложение с css-modules (scss). Мое приложение имеет несколько React приложений.

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

Каждое приложение внутри обернуто в iframe, пример:

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

И внутри каждого приложения своя цепочка компонентов, и каждый имеет свои стили. Как например компоннет Toggler. Тут получается сразу несколько задач:

1. Нужно, чтобы каждая цепочка компонентов собирала свой банд стилей в отдельный файл, чтобы были chat-corner-toggler-app.css и chat-corner-pager-app.css
2. Приложение не импортировала эти стили напрямую (стандартное поведение)
3. Как-то подгружать в iframe's эти бандлы.

Хотя бы 1 пункт решить