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

Question

编辑：找到一个与全局主题配置文件有点不同的解决方案

---

设置：反应，webpack，常规css和样式加载器，没什么特别的

我希望能够在构建步骤中替换导入的文件。就像我使用env WITH_THEME=true构建app一样，用另一个名称替换另一个css文件。

例如，我有2个css文件，style.css和style.theme.css，在反应组件中我只导入一个文件，如import './style.css'（我不想改变这一行，我知道有可能在这里使用env var制作if条件）。

因此，如果我用WITH_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可以排除其中一个。有一个更好的方法吗？也许有一些post-css解决方案？

Answer 1

我实际上最终得到了什么：

我为theme-config文件制作了webpack别名，我在每个.(s)css文件（@import '~scss-config';）中导入。

    resolve: {
      // ...

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

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