showToast, showDialog 按需引入样式无效 v4.8.7 #16205

[wmb0412]

Reproduction Link

https://codesandbox.io/p/devbox/wonderful-nightingale-g6w83h?file=%2Fpackage.json%3A10%2C16

Vant Version

4.8.7

Describe the Bug

根据官网最新文档 vite中配置了但是没用， 只有button之类的有用，之前的toast和dialog之类的组件样式还是没生效

Reproduce Steps

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()],
    }),
  ],
};

<script setup lang="ts">
import { showToast, showDialog } from "vant";
const onClick = () => {
  showToast("你好");
};
const onClick2 = () => {
  showDialog({ title: "提示", message: "HelloWorld" });
};
</script>

<template>
  <van-button type="primary" @click="onClick">showToast</van-button>
  <br />
  <br />
  <van-button type="primary" @click="onClick2">showDialog</van-button>
</template>

Device / Browser

No response

[inottn]

自动导入才会导入相应的样式，所以你需要把手动导入的代码移除。

[wmb0412]

自动导入才会导入相应的样式，所以你需要把手动导入的代码移除。

谢谢，有用

[yassine-zhang]

自动导入才会导入相应的样式，所以你需要把手动导入的代码移除。

谢谢，有用

怎么解决的？没搞懂，我这边也有问题，代码和你一样 Mac Arm64

[wmb0412]

自动导入才会导入相应的样式，所以你需要把手动导入的代码移除。

谢谢，有用

怎么解决的？没搞懂，我这边也有问题，代码和你一样 Mac Arm64

就是把下面这句导入语句去掉，在代码中直接使用方法。

import { showToast, showDialog } from "vant";

[yassine-zhang]

自动导入才会导入相应的样式，所以你需要把手动导入的代码移除。

谢谢，有用

怎么解决的？没搞懂，我这边也有问题，代码和你一样 Mac Arm64

就是把下面这句导入语句去掉，在代码中直接使用方法。

import { showToast, showDialog } from "vant";

ok，明白啦，谢谢您

[iceycc]

导入语句去了，ts 报错咋办

[yassine-zhang]

加上类似注释，报错很有可能是eslint的问题

// eslint-disable-next-line no-undef
showFailToast('创建订单失败')

[wmb0412]

导入语句去了，ts 报错咋办

如果你使用unplugin-auto-import会自动生成auto-imports.d.ts, 会自动帮你生成声明的

可以参考的之前写的项目https://github.com/wmb0412/vue3-h5-template

[XiaopingHu]

没有手动导入语句，样式一样没有自动引入

[silence1996]

去掉手动导入，大家是怎么解决代码提示和eslint报错问题的？

[Teemwu]

@silence1996 tsconfig.app.json 配置文件里配置

{
  "include": [
    "auto-imports.d.ts"
  ],
}

[Flysky12138]

showToast 写 template 根本不会自动导入，不好用。换手动导入