vant按需引入，解决没有样式问题

最新推荐文章于 2025-04-09 12:31:06 发布
原创 最新推荐文章于 2025-04-09 12:31:06 发布 · 6k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #webpack #前端

本文介绍如何在Vue2.6.10项目中使用Webpack4.0配置并集成Vant UI组件库，包括安装依赖、配置babel-plugin-import及在main.js中的引入方式。

开发环境：vue2.6.10  webpack4.0   "vant": "^2.12.4",

步骤如下：

1.npm i vant -S 和 npm install babel-plugin-import --save-dev

2.main.js添加如下：

3.在babel.config.js添加如下：

Vant组件引入后样式不出现的解决
DanielSmith
05-30 7984
Vant组件引入后样式不出现的解决 一般是babel.config里面没有配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: (name) => `${name}/style/less`, }, 'vant'] ] } 出现其他问题： 3.先卸载 less-loader,重新安装： np
【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示
此人太懒，没有任何简介
12-22 1万+
【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示
vant4的 toast、dialog、notify、ImagePreview不显示样式
weixin_57895172的博客
07-03 1119
vant4的 toast、dialog、notify、ImagePreview不显示样式
vant按需引入没样式_vue vant-ui样式出不来的问题
weixin_39860123的博客
12-11 3213
第一步：安装vantnpm i vant -S // 或 yarn add vant第二步：配置按需引入// 在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true...
vant4的dialog、toast不显示样式记录
搬砖小白灿哥哥
03-28 1512
插件会自动帮我们把组件加载上去，但是对于函数式的组件，比如dialog，toast这样的，就会显示的时候没有样式，类似这样。这是因为没有加载对应插件的样式，需要手动加载进来，在页面上直接import进来即可。使用的是按需加载，就是这个。
vue 全局引用vant 项目打包之后vant样式不生效
yangqii的博客
09-26 2728
vue 全局引用vant 项目打包之后vant样式不生效
vue3安装vant 按需引入和全局引入
肥晨开发的学习之路
03-31 835
【代码】vue3安装vant 按需引入和全局引入。
vue项目中vant 按需引入组件样式丢失怎么解决的详细代码
09-26
在Vue项目中使用Vant UI库时，有时按需引入组件可能会导致样式丢失。这通常是由于Webpack配置的问题，因为Vant UI默认依赖的是全局CSS。为了解决这个问题，你需要修改Vant Vue的配置，确保只有你实际使用的组件才...
vant-ui 按需引入
kamianlaidaa的博客
06-04 1116
我们 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为..
vant按需引入
03-29
此外，可能还需要引入样式文件，因为按需引入可能不会自动加载样式。所以用户可能需要在main.js中引入vant的样式文件，或者确保插件能自动处理样式。例如，在Vant的文档中，可能需要额外的配置来导入样式，或者...
vue项目中vant 按需引入组件样式丢失
09-26
在Vue.js项目中使用Vant UI库时，按需引入组件可能导致部分组件的样式丢失。这是因为Vant UI默认包含了一整套全局CSS样式，当你仅选择性地导入某个组件时，并不会自动将该组件相关的样式文件一起引入。 解决这个...
VantUI组件在Vue2项目当中CSS样式不显示
qq_44539570的博客
07-24 2455
关于使用vant组件在Vue2项目中无法正常显示CSS样式的解决方案
vue+vant 按需引用控件，没有vant样式解决办法
热门推荐
欲掩不从心
04-14 1万+
前言： 最近分离一个vue项目，把代码分离后，所需要的包均已安装。最后发现运行后，没有vant的样式。 一度以为是版本问题，重新安装原来版本后还是无法解决。于是再去看了下官网的文档 ，成功解决问题，vant样式出来了。 解决办法如下： 这里看好了 按需引入组件，需要安装一个包 npm i babel-plugin-import -D 安装后，需要去.babelrc文件添加如下代码 ["impo...
在Vite + Vue3 +Vant4中按需引入组件，使用Toast提示信息不展示
qq_44741577的博客
02-04 2211
时死活不显示，实际排查后发现只是不显示，其实元素已经挂载到。这些组件时完全没有问题，但是在使用轻提示（+ vue3 + vite 搭建h5，元素下了，只是因为样式原因导致看不见。这个插件对某些组件的样式无法引入。
解决在vant4中明明引入了Toast，但是在showToast等函数调用中只有内容没有样式
最新发布
2301_81803397的博客
04-09 727
这段时间刚接触vant，想试着去完成一个映入Toast组件的小案例。然而，当我按教程完成了一切配置，却发现这呈现的效果怎么不太对(ˇˍˇ)或许，你会和我一样到浏览器里去排查样式的问题，但是实际上问题出现在了。可以发现，我的内容在左下角。
Vant4函数组件样式丢失问题
Xya_a的博客
09-15 720
今天在写项目的时候 使用到了showToast组件 发现样式丢失了网上冲浪时才发现要导入。例如：import 'vant/es/toast/style';感觉奇奇怪怪的 为什么导入。
vant3按需引入没有样式的解决
智者劳心
03-16 2714
vue3使用vant3的方式，帮助你们解决按需引入vant但是没有样式的问题
Vue3使用VantResolver导致Vant的Toast等组件样式失效解决方案
灰机大大的博客
04-07 1566
Vue3使用VantResolver导致Vant的Toast等组件样式失效解决方案
Vue3 vant4 解决引入的Toast和dialog样式丢失的bug
HaushoLin的博客
02-02 3259
Vue3 vant4 解决引入的Toast和dialog样式丢失的bug
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值