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

Question

我必须能够在运行时改变ant设计变量(不是通过主题少文件)。我发现了很多使用customize-cra的例子。和react-app-rewire-less，但似乎没有一种对鳄鱼有效。我必须使用craco因为我还使用了tailwindcss

我试过了:

• antd-theme-webpack-plugin:我可以访问window.less.modifyVars，但它似乎什么也不做(调用它不会抛出错误，但颜色不会改变);
• antd-theme-switcher:与上述非常相似，window.less.modifyVars似乎没有影响;
• antd-theme:我不知道如何在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

从今天起，我让它工作了。第二种解决方案(主题切换器)实际上发挥了预期的作用。我的错误是我在我的主less文件中添加了默认变量，但要做到这一点，我必须添加颜色。在我的公共文件夹中的less文件(如and -theme-switcher中的第二步所说)，以便window.less.modifyVars有一个less文件来工作。

这似乎不是最有效的方法，虽然，我要从使用和保释在我的项目中尽快，因为似乎没有最佳的解决方案，在运行时改变变量与这个特定的设置。