[Bug Report] 使用unplugin-vue-components导致部分组件样式没有正常引入

[Adaer]

重现链接

https://youzan.github.io/vant/#/zh-CN/dialog

Vant 版本

3.4.5

描述一下你遇到的问题。

由于插件"vite-plugin-style-import": "^1.4.1",有问题，根据提示使用"unplugin-vue-components": "^0.19.6", 替换；
替换后vant部分组件样式失效，查看控制台为样式未引入
样式失效的组件有Dialog、Steps 、Uploader，其他组件暂时未发现

重现步骤

1，安装"unplugin-vue-components": "^0.19.6"
2，使用Dialog、Steps 、Uploader组件

设备/浏览器

chrome 102.0.5005.63（正式版本） （32 位）

[Adaer]

使用 unplugin-vue-components插件替换vite-plugin-style-import
需要 import 'vant/lib/index.css'，解决以上问题

[dwtom]

我遇到了类似的问题（我用的3.5.1，vuecli4），使用unplugin-vue-components 按需引入toast，van-popup 和 van-popup--center两个样式未能生效，追加引入popup组件之后仍然未能生效，像你这样全量引入css才生效

[kele59]

"vant": "^4.0.0-alpha.4",
"unplugin-vue-components": "^0.19.6",

Toast 功能正常，没有样式

[omgcx1222]

"vant": "^3.5.1"
"unplugin-vue-components": "^0.19.6"
Toast 需要自己手动import 'vant/lib/index.css'导入样式才能解决问题

[chenjiahan]

Toast/Dialog/ImagePreview 等组件导出的是函数，而不是 Vue 组件，因此 unplugin-vue-components 无法自动导入这几个组件的样式，目前需要手动处理。

后续会看下如何解决该问题。

[yanbowe]

打包样式覆盖问题unplugin/unplugin-vue-components#327

[jayzch]

使用了unplugin-vue-components，就算单独引入dialog的样式，依旧没有生效。
"vant": "3.4.9",正常

升级"vant": "3.5.0开始不正常。

组件引用后，dialog的 按钮 部分 默认会呈现在页面，不受 show参数控制 @chenjiahan

[Adaer]

@jayzch
4. 引入函数组件的样式
Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。
文档更新是这样的

[jayzch]

@jayzch 4. 引入函数组件的样式 Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。 文档更新是这样的

已经手动引入了，还是不行。样式感觉是成功的，但是vue组件不正常。会直接显示出。

[Adaer]

@jayzch 4. 引入函数组件的样式 Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。 文档更新是这样的

已经手动引入了，还是不行。样式感觉是成功的，但是vue组件不正常。会直接显示出。
你的问题可能是注册组件出现了问题，这几个函数组件用法示例，这样就不会直接弹出来了

<script setup>
  const VanDialog = Dialog.Component;
</script>

<template>
  <!-- 中划线命名 -->
  <van-dialog />
  <!-- 也支持大驼峰命名 -->
  <VanDialog>
</template>

[jayzch]

@Adaer 没有使用CompositionAPI 。原项目升级上来的，继续用的option api 模式。

[thiszhong]

用 unplugin-vue-components 后组件是不是必须要带前缀呀？

setup 引入直接用，没有样式：

<script setup>
import { NoticeBar } from 'vant'
</script>

<template>
  <NoticeBar text="456" />
</template>

带上前缀后是正常的，不过这样好像就不用 import 了：

<template>
  <VanNoticeBar text="456" />
  <van-notice-bar text="或者" />
</template>

想确认下。以前 vite-plugin-style-import 有些代码是直接用的，切换后要动不少[捂脸]

[Cleam]

Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

点击查看vant官网说明

[jayzch]

加了也没用

[landsu]

开启 unlugin-vue-components 后，Dialog 的函数调用，组件调用都失灵，页面加载后，会自动弹出，然后点击事件就无法控制它再次出现了。

关闭 unlugin-vue-components 插件，换手动引入，一切正常。关键是不想用手动引入。

引入了 import 'vant/es/dialog/style'; Dialog 样式，所以样式没有问题，但这不受控制的自动弹出，然后失控是怎么解决呢？

vant: ^3.5.2
vite: ^3.0.0
vue: ^3.2.37
unlugin-vue-components: ^0.21.2

[Adaer]

#10709 (comment)
看这个，是这个问题吗？

[jayzch]

#10709 (comment) 看这个，是这个问题吗？

现在的问题，不是样式问题。

是他自己弹出来了。所以开启 unlugin-vue-components 后，手动样式引入了依旧是不行的。

[Adaer]

是他自己弹出来了。所以开启 unlugin-vue-components 后，手动样式引入了依旧是不行

组件自动弹出是因为使用方式不对，我之前也遇到了，看文档的引用方式，能解决的

[jayzch]

是他自己弹出来了。所以开启 unlugin-vue-components 后，手动样式引入了依旧是不行

组件自动弹出是因为使用方式不对，我之前也遇到了，看文档的引用方式，能解决的

使用Option API模式，组件就是会出问题

[jayzch]

开启 unlugin-vue-components 后，Dialog 的函数调用，组件调用都失灵，页面加载后，会自动弹出，然后点击事件就无法控制它再次出现了。

关闭 unlugin-vue-components 插件，换手动引入，一切正常。关键是不想用手动引入。

引入了 import 'vant/es/dialog/style'; Dialog 样式，所以样式没有问题，但这不受控制的自动弹出，然后失控是怎么解决呢？

vant: ^3.5.2 vite: ^3.0.0 vue: ^3.2.37 unlugin-vue-components: ^0.21.2

#10858 (comment)

[yisense]

使用了"unplugin-vue-components"："0.22.4"，"vant": "3.5.4"
生产环境：vue包不通过cdn引入，则vant 按需引入成功；
生产环境：vue包通过cdn引入，则vant 按需引入失败；
目前还没找到方法
@chenjiahan

[chenjiahan]

@yisense 可以单独开个 issue，提供一下对应的 codesandbox 复现链接哈。

这个 issue 的问题已经在文档里有相关说明了，先 close 了。

[XiaopingHu]

@chenjiahan 按照官网按需引入的教程，在加入VantImports这个选项后，函数式组件的样式无法引入，移除这个选项后才可以正常引入

[chenjiahan]

@XiaopingHu 麻烦新建个 issue 呢

[XiaopingHu]

已提交issue：#12889
@chenjiahan