I have to be able to change ant design variables at runtime (not via theme less files). I've found plenty of examples of this using customize-cra and react-app-rewire-less, but none seem to work with craco. I have to use craco because I'm also using tailwindcss in this project.
What I've tried:
window.less.modifyVars
, but it seems to do nothing (calling it throws no errors, but the antd colors don't change);window.less.modifyVars
seems to have no effect;AntdThemePlugin.loader
in craco.config.js
, and I'm not sure that is the problem, but I could not make it work.This is the current state of my 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 },
],
};
At this point I'm up to try any possible solutions really, this problem has been really time consuming.
As of today I got it working. The second solution (antd-theme-switcher) actually worked as intended. My error is that I was adding the antd default variables in my main less file, but for this to work I had to add the color.less file in my public folder (as the second step in antd-theme-switcher says), so that window.less.modifyVars
has a less file to work in.
This seem to be not the most performatic approach though, and I'm going to bail from using antd in my project as soon as I can, as there seems to be no optimal solution for changing variables at runtime with this specific setup.