1.基座项目 和子项目的引入相同antd ui 框架,但是版本不同。会导致antd 样式覆盖
解决: 给子项目或者基座antd 修改class 类名前缀 antd 默认是 ant类名 我们可以改成 ymx 或者自己想要的其他前缀
//webpack 配置
{
loader: 'less-loader',
options: {
lessOptions:{
javascriptEnabled: true,
modifyVars: {
// 以下两个配置使用前提是必须在按需引入那里配置"style": true,否则不起作用,因为这里要是用less变量
// @primary-color是设置antd的主题色,默认是蓝色的
// @ant-prefix是自定义antd组件类名前缀的,需要配合<ConfigProvider prefixCls="ymx">使用
"@primary-color": "red",
"@ant-prefix": "ymx",
},
}
},
}
//vite 配置
css: {
// css预处理器
preprocessorOptions: {
less: {
javascriptEnabled: true,
charset: false,
modifyVars: {
"@primary-color": "#FF8121",
"@ant-prefix": "c5Income",
"@iconfont-css-prefix": "anticon"
},
},
},
},
<ConfigProvider prefixCls="ymx" iconPrefixCls="anticon"> //里面的prefixCls是改变jsx文件里面的dom节点的className名称
//iconPrefixCls="anticon" 这个是 icon的前缀需要配合@iconfont-css-prefix使用
message需要单独修改
message.config({
top: 100,
duration: 2,
maxCount: 3,
prefixCls: 'c5Income-message', // 注意messge自己定义的前缀 需要加上 -message
});
Modal.config({
rootPrefixCls: 'c5Income',
});