Css 网页包：有没有办法在处理之前替换导入的文件路径？

设置：react、网页包、常规css和样式加载器，没有什么特别之处

我希望能够在构建步骤中替换导入的文件。就像我用env

和_THEME=true构建应用一样

用另一个不同名称的css文件替换一个css文件

例如，我有两个css文件，

style.css

和

style.theme.css

，在react组件中，我只导入一个像这样的文件

import./style.css'

（我不想更改这一行，我知道如果这里有env var，我可以设置

条件）

因此，如果我用
和_THEME=true
启动webpack，我希望它实际导入
style.THEME.css
，而不是常规的
style.css
，，但前提是
style.THEME.css
存在

我提出了这个解决方案，它是装载机的测试条件：

  // ...
  test: filePath => {
    if (!/\.(s*)css$/.test(path.extname(filePath))) {
      return false;
    }

    const { dir, name, ext } = path.parse(filePath);
    const themeFilePath = `${dir}/${name}.theme${ext}`;

    if (WITH_THEME && fs.existsSync(themeFilePath)) {
      return false;
    } else {
      return true;
    }
  },
  // ...

但是用这种方法，我需要在组件中导入
style.css
和
style.theme.css
，这样webpack就可以排除其中一个。有更好的方法吗？也许有一些后css解决方案？
我最终得到的是：

我为
主题配置
文件制作了网页包别名，我在每个
css
文件（
@import'~scss config'；
）中导入该文件

它允许有多个主题文件，但您只需要导入一个配置文件，在构建步骤中将其替换为所需的主题文件

    resolve: {
      // ...

      alias: {
        'scss-config': path.resolve(
          __dirname,
          `./src/styles/config-${env.THEME || 'default'}.scss`
        )
      }
    },