如何在带有@imports语句的css模块中使用splitchunks避免重复类

Question

我有一个使用CSS模块（手写笔）的nextjs应用程序。我使用es6导入在相应的组件中导入样式文件，如代码所示。这些导入的手写笔文件具有通用的@import语句，如代码所示。

我正在尝试使用splitchunks生成两个CSS块。 1）main.css（这将具有main.styl的所有常见CSS类）。 2）app.css（它将包含所有css组件）

我尝试使用mini-css-extract-plugin尝试splitchunk配置，如代码所示。

我可以使用以下配置正确生成main.css，但是app.css具有很多重复的（重复的）main.styl通用类以及组件的类。

手写笔文件示例（像这样，我有很多组件文件）

@import '../../layout/main/main.styl'

.search-main-part
  min-height 500px

...

JS文件示例（例如，我有很多组件）

...
import styles from './search.styl';
...

<div className={styles['pt-20']}>
...
</div>
...

Splitchunk配置

config.optimization = Object.assign({}, config.optimization, {
  splitChunks: Object.assign({}, config.optimization.splitChunks, {
    cacheGroups: Object.assign({}, config.optimization.splitChunks.cacheGroups, {
      main: {
        name: 'main',
        test: (m, c) => {
          return m.constructor.name === 'CssModule' && m._identifier.indexOf('main') !== -1;
        },
        priority: 2,
        chunks: 'all',
        reuseExistingChunk: true,
        enforce: true
      },
      app: {
        name: 'app',
        test: (m, c) => {
          return m.constructor.name === 'CssModule' && m._identifier.indexOf('main') === -1;
        },
        priority: 3,
        chunks: 'all',
        reuseExistingChunk: true,
        enforce: true
      }
    })
  })
});

app.css应该仅具有组件的类