1. 起因
??歷史原因策橘，最開始項目里使用的是antd-mobile:2.x锚扎，由于實在是太難用坎拐，我想要同時使用v5版本，參考官網(wǎng)的遷移指南芹缔，我們可以使用第一種方法：官網(wǎng)參考
??但是使用了之后發(fā)現(xiàn)antd-mobile-v2的樣式?jīng)]有被正確引用坯癣，通過查看umi的插件plugin-antd發(fā)現(xiàn)，在引用antd的時候配置了babel最欠，引入了樣式示罗。所以我猜測是因為包名變成了antd-mobile-v2導致無法正確引入蓬网，所以我模仿這個插件重新修改了babel配置
2. 解決
2.1 在任意目錄新建一個文件
// 比如我在項目根目錄新建了文件
// \plugins\umi-plugin-am5-style\index.ts
import { IApi } from "umi";
// umi插件就是一個函數(shù)
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 },
// .....
})
