antd-theme
antd-theme copied to clipboard
Doesn't work with react-app-rewired
I have tried to get this solution working with next.js, react-app-rewired + customize-cra and react-app-rewired vanilla.
All 3 attempts have failed for a really simple application.
the next.js and customize-cra attempts produced errors. But the vanilla react-app-rewired runs, it even displays the theme Selector and I can console log the output of useTheme. But no styles ever gets loaded.
Here's the config-overrides.js
const AntdThemePlugin = require('antd-theme/plugin');
module.exports = {
webpack: function (config, env) {
config.module.rules.push(
{
test: /\.less$/i,
use: [
{
loader: AntdThemePlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
}
},
},
],
}
)
config.plugins.push(new AntdThemePlugin({
// Variables declared here can be modified at runtime
variables: ['primary-color'],
themes: [
{
name: 'default',
filename: require.resolve('antd/lib/style/themes/default.less'),
},
{
name: 'dark',
filename: require.resolve('antd/lib/style/themes/dark.less'),
},
{
name: 'compact',
filename: require.resolve('antd/lib/style/themes/compact.less'),
},
],
}))
return config;
}
}
I also tried loading a basic .less
file, and the output for this doesn't load. either :/
Please help, I have spent a full week trying to get a dynamic antd theme switcherr working with either next.js or CRA 🙏