如何使用SASS使用Webpack生成单独的主题文件？

Question

警告：我是webpack的新手。

我有一个网站，其中有几种不同的配色方案。

当前，我使用Sass并且我的组件经过结构化，以便它们的所有资产都位于同一目录中。类似于以下内容：

/components
  /button
    button.js
    button.sass

我的全局变量已加载sass-resources-loader

使用以下配置，所有内容均可编译。我将在main.css目录中获得一个dist文件。

rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: MiniCssExtractPlugin.loader },
                { loader: 'css-loader' },
                { loader: 'sass-loader' },
                {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: require(path.join(process.cwd(), "style/defaults.js"))
                    }
                }
            ]
        }
    ]

我的问题是，如何在dist目录中生成一个新主题？ js文件和其他内容将保持不变。真正唯一改变的是全局变量值。

我的预期输出如下：

/dist
  main.css
  theme-a.css
  theme-b.css

更新：我可以通过在webpack中使用Multi-compile方法来实现此目的，但是感觉... 混乱。配置文件中有很多重复项，并且为每个入口点创建了其他js文件，这些文件可以派上用场，但是我不太需要我的特定项目。