使用craco在运行时更改antd变量

Question

我必须能够在运行时更改ant设计变量(而不是通过主题减少文件)。我已经找到了很多使用react-app-rewire-less，定制、cra、和craco的例子，但是似乎没有一个能与craco一起工作。我必须使用craco，因为我在这个项目中也使用了。

我试过的是：

• antd主题-webpack-插件：我可以访问window.less.modifyVars，但它似乎什么也不做(称它不会抛出错误，但是antd颜色不会改变)；
• antd主题转换器：非常类似于上面提到的，window.less.modifyVars似乎没有效果；
• antd主题：我不知道如何在craco.config.js中添加AntdThemePlugin.loader，我也不确定这就是问题所在，但我无法让它工作。

这是我的craco.config.js的当前状态

const path = require("path");
const CracoAntDesignPlugin = require("craco-antd");

const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const options = {
  antDir: path.join(__dirname, "./node_modules/antd"),
  stylesDir: path.join(__dirname, "./src"),
  varFile: path.join(__dirname, "./src/styles/variables.less"),
  themeVariables: ["@primary-color"],
  indexFileName: false,
  generateOnce: false,
};
const ThemePlugin = new AntDesignThemePlugin(options);

module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "./src/styles/variables.less"
        ),
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
              "@primary-color": "#00375B",
            },
          },
        },
      },
    },
    { plugin: ThemePlugin },
  ],
};

在这一点上，我想尝试任何可能的解决方案--真的，这个问题真的很费时。

Answer 1

从今天起我开始工作了。第二个解决方案(antd主题转换器)实际上是按预期工作的。我的错误是，我在我的主theme文件中添加了antd默认变量，但是为了工作，我必须将color.less文件添加到我的公用文件夹中(正如antd主题切换程序中的第二步所说)，这样window.less.modifyVars就有了更少的文件可供工作。

不过，这似乎不是最具表现力的方法，我将尽可能避免在我的项目中使用antd，因为在运行时使用这种特定设置更改变量似乎没有最佳解决方案。