Webpack multiple CSS outputs with ExtractText

Question

I have a repo with multiple react components that need to work totally separated from each other, so every component has it's own output dir with the respective CSS, JS and HTML. To achieve this I iterate over an array with all the component names, adding entry points, HTMLWebpackPlugin, SASS and CSS loader and the extract text plugin, each with the path of the component.

config = { /*...someGlobalWebpackSettings like alias, externals etc. */ }


components.forEach(component => {
  const extractStyles = new ExtractTextPlugin({ allChunks: true, filename: `${component}/${component}.css` })
  const componentPath = path.resolve(base, 'src', 'components', component)

  config.entry[component] = componentPath

  config.plugins.push(extractStyles)
  config.plugins.push(new HtmlWebpackPlugin({
    filename: path.resolve(base, 'dist', `${component}/${component}.html`),
    chunks: [component],
    template: path.resolve(base, 'index.html')
  }))

  config.module.rules.push({
    test: /\.scss$/,
    exclude: /node_modules/,
    include: [componentPath],
    use: extractStyles.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader']
    })
  })

  config.module.rules.push({
    test: /\.css$/,
    include: [componentPath, ...publicStylePaths],
    use: extractStyles.extract({
      fallback: "style-loader",
      use: ["css-loader"]
    })
  })
})

This works fine with only one component, but for some reason when adding a second component the styles from the first disappear, meaning the respective CSS-file has only the global styles and not the component specific ones. This might have to do with the ExtractText plugin not working properly with multiple instances, but I'm really not sure.

Screenshot of Webpack build output

Looking at the webpack build output you can see, that the second css file is a lot smaller because it has just the global styles. What irritates me is that both css files list both the component chunks, what does this mean?

Does anyone here have a proper solution for this or has tried to achieve something similar? Is their an obvious way that I am not aware off? Thanks a lot in advance!