Vant4：自动导入样式无效问题

本文主要是介绍Vant4：自动导入样式无效问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天前端小伙伴使用了Vant4，发现了一个奇怪的问题：按照Vant官方文档，按需引入组件样式（Vite 的项目）：

安装插件

# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

配置插件

在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';export default {plugins: [vue(),AutoImport({resolvers: [VantResolver()],}),Components({resolvers: [VantResolver()],}),],
};

使用组件和 API

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件, @vant/auto-import-resolver 会自动引入对应的组件样式。

<script setup>
showToast('test')
</script>

如果完全按照上述步骤操作应该是没有问题的，但一不小心没留意到原先已经有手动导入vant的习惯，比如：

<script setup>
import { showToast } from 'vant'
showToast('test')
</script>

结果会发现，无法正常显示toast消息。关于这个问题在Vant的github上有相关的问题：https://github.com/youzan/vant/issues/12709。

上面的示例还算是比较好排查和理解的，但项目的实际的代码复杂一些，可能会令人匪夷所思。比如：

// login.vue<script setup>
import { showToast } from 'vant'
import AuthApi from 'api/auth'showToast('test')
</script>

// api/auth.js
import request from 'utils/request'
export default class AuthApi {static getCode (data) {return request.post('/login', data)}...
}

// utils/request.js
import axios from 'axios'
import { getToken, goLogin } from 'utils/auth'service.interceptors.response.use(response => {const res = response.dataconst { errCode, errMsg } = resif (errCode === 40001) {showToast(errMsg)}...
})

在上述的login页面，显示的导入了showToast ：import { showToast } from 'vant'，但页面仍能正常显示toast:
在这里插入图片描述