解决ant design主题颜色在cdn加载时丢失的问题
在使用CDN加载Ant Design组件时，自定义主题颜色失效是一个常见问题。这是因为Ant Design的Less样式无法被正确覆盖。
解决方案：
推荐使用less-loader来加载Ant Design，并通过配置全局变量来修改主题颜色。
针对不同版本的less-loader，配置方法略有不同：
less-loader版本低于6.0.0：
// webpack.config.js
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
modifyVars: {
'primary-color': '#1fb5ab', // 自定义主题颜色
},
javascriptEnabled: true,
},
},
],
},
],
}
less-loader版本高于或等于6.0.0：
// webpack.config.js
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
'primary-color': '#1fb5ab', // 自定义主题颜色
},
},
},
},
],
},
],
}
通过lessOptions.modifyVars属性，您可以轻松覆盖Ant Design的默认主题颜色，实现自定义主题效果。 记得将#1fb5ab替换成您想要的颜色值。
