// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
报错信息：

[vite] Internal server error: Failed to resolve import "/sandbox/node_modules/vant

/lib/vant/es/button/style" from "src/main.js". Does the file exist?

Plugin: vite:import-analysis

File: /sandbox/src/main.js

3  |  import { Button } from 'vant'

5  |  import '/sandbox/node_modules/vant/lib/vant/es/button/style';

|          ^

打开codesandbox即可
设备/浏览器
No response
vite-plugin-style-import现在的版本是2.0.x，升级之后报其他的错
vant3.4.9 + vite-plugin-style-import 1.4.1 正常

vant3.4.9 + vite-plugin-style-import 2.x 报错
组件有如下错误，项目已经迭代几次了，突然出现这种报错；请教各位大佬，是我的类型声明有问题吗，但是其他组件没发现这种问题

 <van-skeleton title :row="15" :loading="loading"> <van-cell v-for="(item, key) in mapData" :key="key" :title="${item.label}："> 

const VanSkeleton: WithInstall<DefineComponent<{

row: {

type: (NumberConstructor | StringConstructor)[];

default: number;

title: BooleanConstructor;

round: BooleanConstructor;

... 6 more ...;

rowWidth: {

}, ... 10 more ..., {

}>> | (ComponentPublicInstanceConstructor<...> & ... 5 more ... & Plugin_2)

没有与此调用匹配的重载。

第 1 个重载(共 2 个)，“(...args: any[]): ({ $: ComponentInternalInstance; $data: {}; $props: Partial<{ dynamicId: string; theme: PopoverTheme; placement: PopoverPlacement; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }) | ({ ...; } & ... 5 more ... & { ...; })”，出现以下错误。

第 2 个重载(共 2 个)，“(): ({ $: ComponentInternalInstance; $data: {}; $props: Partial<{ dynamicId: string; theme: PopoverTheme; placement: PopoverPlacement; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }) | ({ ...; } & ... 5 more ... & { ...; })”，出现以下错误。ts(2769)
          
这个问题出现已经大半年了。
vbenjs/vite-plugin-style-import#52  当时的版本是1x左右，但是不知道作者为什么自己关闭了issue.
#10147  现在vant3.5，v-p-s-i 2.x 也是会报错。
等待社区解决再按需引入
          
vite-plugin-style-import 看起来已经不太维护了，问题比较多，后续我们推荐使用 unplugin-vue-components。
1. 安装插件
# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D
2. 配置插件
安装完成后，在 vite.config.js 文件中配置插件：
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
vite-plugin-style-import 看起来已经不太维护了，问题比较多，后续我们推荐使用 unplugin-vue-components。
1. 安装插件
# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D
2. 配置插件
安装完成后，在 vite.config.js 文件中配置插件：
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
<Circle
    :current-rate="currentRate"
    color="#219EFF"
    layer-color="#E5E8ED"
    start-position="right"
    v-bind="$attrs"
    :stroke-width="strokeCom"
    :size="sizeCom"
import { Circle } from 'vant';
这样,样式并不会引入。但之前的vite-plugin-style-import不就是这么简单就可以使用了吗

是否必须使用app.use(Circle)来注册组件？然后页面中使用<van-circle>的方式？ @chenjiahan