我已经使用Webpack 4制作了一个React应用程序。我使用了一个现有的主题，所以我有1个theme.scss文件，该文件会导入许多其他的scss文件：
@import "theme/gui/elements";
@import "theme/gui/accordion";
.
..
...
现在在我的Layout.js中（此组件包装了所有使用样式的组件），我导入了theme.scss文件：
import 'src/assets/sass/theme.scss';
一切正常，但是当我运行Lighthouse audit时，我遇到了问题。
当我在Webpack配置中使用mini-css-extract-plugin时，css被提取到一个大的client.hash.css文件中。有点像Kinda，因为我在1个地方导入了文件。但是当我仅从theme.scss导入1类时，它还会创建一个包含所有CSS和E.g.在首页上（我只使用所有CSS的一小部分）上的灯塔说：“删除未使用的CSS-可能节省25 kb，共26 kb”。
现在，当我不使用mini-css-extract-plugin时，Lighthouse不会说“删除未使用的CSS”，但是性能会变差。
我的问题是，如何使Webpack将样式构建为大块，以便它确实使用样式构建单独的CSS文件，但仅构建所需的样式。
因此，我只尝试导入在组件中使用的类（import { navbar } from 'src/assets/sass/theme.scss';，其中navbar是类名），但是Webpack仍然使客户端捆绑了所有CSS（也是未使用的类）。
有没有办法，还是应该将所有SCSS重写为CSS模块？