背景
目前使用 qiankun 微前端框架，父子应用都是使用 antd，父应用使用的是 ant-design-pro V5，为防止样式冲突，父应用需要把 antd 的前缀由 ant 修改为其他的（我们修改为 bapAnt）.
下面说说我遇到的坑！
umi 版本不同，配置不同
Umi 目前主要有 Umi@2 和 Umi@3，两个版本有重大区别，目前我们用的是 Umi@3。但是即便是Umi@3里面小版本也会有重大区别！
因为我比较喜欢追求新东西，所以啥都是最新的，使用的是最新的 umi@3.5.x。目前我们sass系统是按视角划分项目的，不同的项目使用的小版本稍微有不同，用户视角用的是 umi@3.5.21，其他几个视角的项目用的是 umi@3.5.20（其实都是我整理项目时当天最新的版本，哈哈~）
下面就来说说 umi@3.5.21 和 umi@3.5.20 配置 ant 前缀的区别吧！
1. umi@3.5.21（需要@)
用户视角最先接入qiankun，作为一个父应用，自然要更改antd前缀，umi@3.5.21 的配置如下：
// config/config.ts
const ANT_PREFIX_CLS = 'bapAnt'
export default defineConfig({
antd: {
config: {
prefixCls: ANT_PREFIX_CLS,
},
},
lessLoader: {
modifyVars: {
'@ant-prefix': ANT_PREFIX_CLS,
},
},
// 其他配置
})
运行一下，果然是OK的，开心心！
一点说明：
antd里面的config.prefix属性的配置，会把html里面的样式名修改为新的样式前缀名
lessLoader里面的modifyVars会修改less文件里面的样式，这样就可以与html里面的样式匹配了。
2. umi@3.5.20（不需要@)
随着业务的发展，其他视角也要作为父应用接入子应用，我把上面的配置搬过去，以为一切都OK，一运行界面样式全部错乱，我瞬间凌乱了。查了半天资料，没找到一个对的。
我甚至一度怀疑是 mfsu 导致的，然后每次更改配置我都重新run一遍，最终刚发现没有区别，跟 mfsu 无关。
后来不断地摸索，最终发现，是要去掉 @，即 @ant-prefix 要改为 ant-prefix！
// config/config.ts
const ANT_PREFIX_CLS = 'bapAnt'
export default defineConfig({
antd: {
config: {
prefixCls: ANT_PREFIX_CLS,
},
},
lessLoader: {
modifyVars: {
- '@ant-prefix': ANT_PREFIX_CLS,
+ 'ant-prefix': ANT_PREFIX_CLS,
},
},
// 其他配置
})
总算可以了！
3. theme 也可以修改 less 变量
其实我是先摸索了 theme ，发现了官网瞎写的，然后才摸索出上一节的配置的。
先看下官网是怎么坑我们的：umijs.org/zh-CN/confi…
配置如下：
export default {
theme: {
'@primary-color': '#1DA57A',
},
};
但是 umi@3.5.21 这样配置不生效，需要把 @ 去掉才行！
export default {
theme: {
'@primary-color': 'yellow', // umi@3.5.20 生效，umi@3.5.21 无效
'primary-color': 'pink', // umi@3.5.21 生效
'ant-prefix': ANT_PREFIX_CLS, // 都无效：theme 里面不能修改 ant-prefix
},
}
注意如果
lessLoader和theme同时修改一个变量theme里面的优先级更高！
而 umi@3.5.20 更惨，不知道怎样配置才生效，因为目前不管加不加 @ 都不生效；希望有知道的同学告诉一下我答案。
汇总一下正确的配置
umi@3.5.21
export default {
antd: {
config: {
prefixCls: ANT_PREFIX_CLS,
},
},
lessLoader: {
modifyVars: {
'@ant-prefix': ANT_PREFIX_CLS,
'@primary-color': 'yellow',
},
},
// 优先级最高，会覆盖lessLoader里面的变量修改
theme: {
'primary-color': 'pink',
},
}
umi@3.5.20
export default {
antd: {
config: {
prefixCls: ANT_PREFIX_CLS,
},
},
lessLoader: {
modifyVars: {
- '@ant-prefix': ANT_PREFIX_CLS,
- '@primary-color': 'yellow',
+ 'ant-prefix': ANT_PREFIX_CLS,
+ 'primary-color': 'yellow',
},
},
+ // 3.5.20 目前下面的写法都无效，等以后知道怎么配置了再来更新！
theme: {
'primary-color': 'pink', // 无效
'@primary-color': 'pink', // 无效
},
}
最后注意，不能开启
mfsu，否则生产的样式不会加进去，导致页面样式错乱。
如果有帮到您，请为我点个赞呀~~
