umi中同时使用antd-mobile v2和v5

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 },
    // .....
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容