vite模式下使用vant，缺少样式

[DCLangX]

详细描述你的问题

打扰了大佬，，想问下vite对ui框架的支持是不是还在开发中啊，我用的vite+vue3+nestjs，照文档单文件引入Button，发现样式没有被导入

<template>
  <div>
    <Button>button</Button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Button } from 'vant'
export default defineComponent({
  components: {
    Button
  }
})
</script>

试着引入lib或es的样式，import 'vant/lib/button/style'或import 'vant/es/button/style'，都报错了，提示 Cannot find module 'vant/lib/button/style' imported from ...等等 又照着vant文档，在config.ts里配了自动导入样式的插件

import type { UserConfig } from 'ssr-types'
import styleImport from 'vite-plugin-style-import'
const userConfig: UserConfig = {
  isVite: true,
  //固定使用vite启动
  viteConfig () {
    return {
      client: {
        extraPlugin: [styleImport({
          libs: [
            {
              libraryName: 'vant',
              esModule: true,
              resolveStyle: (name) => {
                return `vant/es/${name}/style`
              }
            }
          ]
        })]
      }
    }
  }
}

export { userConfig }

打包也是提示

error: 下午1:46:52 [vite] Error when evaluating SSR module /web/pages/login/render.vue:
Error: Cannot find module 'vant/lib/button/style' imported from 'D:/项目/前端项目/pdi重构/源码/web/pages/login/render.vue'
    at viteResolve (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67347:25)
    at nodeImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67373:15)
    at ssrImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67281:20)
    at eval (/web/pages/login/render.vue:5:37)
    at async instantiateModule (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67326:9)

error: [Vue Router warn]: uncaught error during route navigation:

error: Error: Cannot find module 'vant/lib/button/style' imported from 'D:/项目/前端项目/pdi重构/源码/web/pages/login/render.vue'
    at viteResolve (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67347:25)
    at nodeImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67373:15)
    at ssrImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67281:20)
    at eval (/web/pages/login/render.vue:5:37)
    at async instantiateModule (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67326:9) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Error: Cannot find module 'vant/lib/button/style' imported from 'D:/项目/前端项目/pdi重构/源码/web/pages/login/render.vue'
    at viteResolve (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67347:25)
    at nodeImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67373:15)
    at ssrImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67281:20)
    at eval (/web/pages/login/render.vue:5:37)
    at async instantiateModule (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67326:9) {
  code: 'ERR_MODULE_NOT_FOUND'
}

error: (node:33968) UnhandledPromiseRejectionWarning: Error: Cannot find module 'vant/lib/button/style' imported from 'D:/项目/前端项目/pdi
重构/源码/web/pages/login/render.vue'
    at viteResolve (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67347:25)
    at nodeImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67373:15)
    at ssrImport (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67281:20)
    at eval (/web/pages/login/render.vue:5:37)
    at async instantiateModule (D:\项目\前端项目\pdi重构\源码\node_modules\vite\dist\node\chunks\dep-3daf770c.js:67326:9)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:33968) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

[zhangyuang]

这里面涉及到了 vant vite-plugin-style-import vite 都有问题，我会在稍后给 vite 提 pr。目前可以这么写

import {Button} from 'vant'
import '/node_modules/vant/es/button/style/index.js' // 按需导入样式，不建议用需要写多次
 import 'vant/lib/index.css'// 整个导入

[DCLangX]

import 'vant/lib/index.css'

好的👍

[zhangyuang]

最新版本已支持，可以直接用按需导入语法引入。fix by https://github.com/zhangyuang/ssr/commit/62d936b62dd47365be8eb27564628adc139b619d