Question

编辑：使用全局主题配置文件发现了一些不同的解决方案

设置：react，webpack，常规的CSS和样式加载器，没什么花哨的

我希望能够在构建步骤中替换导入的文件。就像我用env WITH_THEME=true构建应用程序一样，将一个css文件替换为另一个具有不同名称的文件。

例如，我有2个css文件style.css和style.theme.css，在react组件中，我仅导入一个像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可以排除其中之一。有一个更好的方法吗？也许有一些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`
        )
      }
    },

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

Webpack：是否可以在处理之前替换导入的文件路径？

1 个答案: