Webpack 4，使用splitChunks创建入口点中未定义的动态css文件名

Question

我正在尝试使用webpacks splitChunks将另一个CSS文件[grace.scss]添加到我的包中。我有一个创建js / main.js和css / main.css的js入口点。我们需要主题，因此我也想捆绑grace.scss文件而不为其创建另一个js文件。我的所有研究使我相信这是可能的，但是我现在有两个问题。当我尝试使用splitChunks动态创建css文件名时，我得到了一个名为2.css和2.css.map的css文件。我也得到一个js文件或2.js和grace.scss.chunks.js

我尝试了许多不同的途径，但不确定从这里出发。非常感谢您提供的任何帮助。

我追求的是

dist/
  css/
    grace.css
    frace.css.map
    main.css
    main.css.map
  js/
    main.js
    main.js.map

index.js

import './css/style.scss';
import './css/themes/grace.scss';

webpack.config.js

entry: {
    main: ['./index.js', './css/style.css']
},
output: {
    path: path.join(__dist, 'tri'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js',
},
optimization: {
    splitChunks: {
       cacheGroups: {
         style: {
           test: /[\\/]css[\\/](themes)[\\/]/,
           enforce: true,
           minSize: 10000,
           maxInitialRequests: 10,
           name (module) {
             let style
             if (typeof module.resource !== 'undefined') {
                style = module.resource.match(/[\\/]css[\\/]themes[\\/](.*?)([\\/]|$)/)[1]
             }
           return style
          }
       }
    }
  }
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
    chunkFilename: 'css/[name].css'
  })
]