1. 起因
历史原因，最开始项目里使用的是antd-mobile:2.x，由于实在是太难用，我想要同时使用v5版本，参考官网的迁移指南，我们可以使用第一种方法：官网参考
但是使用了之后发现antd-mobile-v2的样式没有被正确引用，通过查看umi的插件plugin-antd发现，在引用antd的时候配置了babel，引入了样式。所以我猜测是因为包名变成了antd-mobile-v2导致无法正确引入，所以我模仿这个插件重新修改了babel配置
2. 解决
2.1 在任意目录新建一个文件
// 比如我在项目根目录新建了文件
// \plugins\umi-plugin-am5-style\index.ts
import { IApi } from "umi";
// umi插件就是一个函数
export default function (api: IApi) {
api.modifyBabelPresetOpts((opts) => {
// 增加这个配置
const imps = [{ libraryName: 'antd-mobile-v2', libraryDirectory: 'es', style: true }];
return {
...opts,
import: (opts.import || []).concat(imps),
};
});
}
2.2. 在umi配置
// .umirc.ts
export default defineConfig({
// .....
plugins: [require.resolve('./plugins/umi-plugin-am5-style'),
antd: { mobile: false },
// .....
})
