cli 创建的uniapp项目引入vant 样式报错解决方案

已于 2023-04-26 15:54:56 修改
阅读量1.1k 收藏 1
点赞数 2
文章标签： uni-app vue2 vant
于 2022-11-03 14:19:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42294411/article/details/127669363
版权

首先看错误.

在这里插入图片描述

解决方案就是在app.vue中引入vant样式,之前main.js中的vant样式删掉
app.vue
在这里插入图片描述
main.js
在这里插入图片描述
运行项目即可

NM-BOY
关注
uniapp - 解决引入使用vant组件库时出现报错 Module build failed (x) SyntaxError | @import ‘../common/index.css‘；.van
高级前端工程师
08-08 4082
uniapp，vantUI，有赞组件库，报错，uniApp适用vant组件库控制台出现一大片报错，解决uniapp项目中使用vant Weapp图标组件报错问题，UniApp中引入VantUI后出现报错@import ‘../common/index.css‘；.van-icon{text-rendering:auto；-webkit-font-smoothi，HbuildX中uniapp引入vant出现的报错：Module，详细解决办法，出错，还是不行，有问题，引入VantUI后，运行发现报错了，怎么办，
uniapp使用vue3引入vant踩过的坑
2201_75491624的博客
08-29 2339
整理了在使用hbuilderX创建uniapp时踩过一些莫名其妙的坑,顺便理一下创建项目和导入vant的过程~~踩坑:1.下载vant后没有node_moduled文件2.引入vant后无法使用组件。
实战避雷记录 | 关于uni开发小程序引入vant weapp事件失效
zerobiu的博客
03-08 1079
①最初引用vant开发小程序的时候是原生开发，此次用uniapp开发小程序项目时也想着引入使用下。②结果遇到的问题是展示内容比如输入框这种的都可以，但是点击事件的时候出不来效果。③一开始想着是不是版本用错了，后面看了下文档针对小程序的版本就是weapp的。把usingComponents挪到globalStyle里面全局引入就好了。不能在pages中局部引入组件。一顿试错之后，发现原来。
uniapp引入vant2单独样式报错 Unclosed bracket ＞ 1 | .van-icon{position:relative；等等
m0_70632275的博客
11-20 231
看了一篇其他文章解决的，感觉很离谱但是却实现了。文件里里面搜索url，在url前面增加空格即可。2.找到vant里面的icon组件,在。有两个url，我都加了空格，然后就生效了。1.引入vant2后保存会报错。
uniapp 集成vant报错
小漠007的专栏
06-04 377
全文搜索：.woff，找多对应的文件，右键格式化后保存，重新允许就可以了。系统：mac os monterey 12.6。
uniapp小程序之weapp引入无效，报错
8月13日
12-27 1596
没事弄个uniapp小程序玩，然后在引入weapp出现各种bug，也不算是bug，但是，也困扰我好久了 出现引入的组件报错，一直在报错 解决办法： 主要是因为没有看一篇文档https://uniapp.dcloud.io/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81 里面主要介绍了在各种项目中，这...
uniapp项目中引入vant
m0_61083409的博客
03-09 2289
uniapp项目引入vant-UI 引入方式和踩到的坑 uniapp框架可以写多端的项目和生成多端代码，在引入vant-UI时要确定是写那个端的项目，小程序端和H5项目引入vant组件是不一样的。这个对于刚用uniapp的搬砖人很不友好，容易搞错。今天简单把两种引入的方式在这里讲一下 希望能帮到一些人。 uniapp小程序引入vant方法 .在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级 2.前往https://github.com/youzan/vant-weapp下载
在HBuilder X中，创建uniapp vue3项目上引入vant3
weixin_52310472的博客
08-09 3072
uniapp-vue3上配置vant3
Uniapp引入vant-weapp
Tfishupupup的博客
08-08 4974
vant引入uniapp，引入过程及问题记录
vue-cli4.5.13按需引入vant，解决vant样式失效问题
weixin_46190955的博客
06-28 1988
1.使用vue-cli4.5.13新建vue项目 ①先全局安装最新版本的vue-cli,如果安装了旧版本的，最好先卸载 npm install -g @vue/cli # OR yarn global add @vue/cli @创建项目 vue create 自己项目的名称 2，下载vant npm i vant -S 3.下载babel-plugin-import并在babel.config.js中修改配置如下（babel-plugin-import文档上有详细说明如何配置） module.exp
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-06 2519
话不多说，先看下问题描述：使用uni-app开发微信小程序项目，使用的是Vant Weapp实现Tab标签页。要实现跳转过来，显示默认的当前tab。
van 自定义组件_【报Bug】uniapp 页面里引入自定义组件，自定义组件再引入有赞的组件事件不生效...
weixin_39697143的博客
12-19 549
详细问题描述在index.vue里引入了自己写的自定义组件PickerDiy，在pickerDiy里面再引用了vant有赞的组件，组件上的 ，bindPickerChange(e){}获取不到这个e这个参数值，是undefined如果直接在index.vue里这个$event是能获取到参数的，就是组件里引用了组件就获取不到$event参数了[内容]重现步骤[步骤]1.在index页面引入了自定义组...
uniapp安装vant并解决样式引入报错
最新发布
qq_44741577的博客
03-16 1417
unaipp引入vant组件库的时候，按照官网的步骤，一直报错。
引入vant样式失效问题
qq_45680403的博客
04-08 1984
vant按需引入之后，样式失效，解决办法： 查找半天有可能问题出在了 requireModuleExtension
uniapp在使用van-dropdown-menu点击选项后页面点击没反应
天码星空
04-02 1867
问题描述:点击下拉选项后,整个页面无法点击 解决办法: 原件: <van-popup show="{{ showPopup }}" custom-style="position: absolute;{{ popupStyle }}" overlay-style="position: absolute;" overlay="{{ overlay }}" position="{{ direction === 'down' ? 'top' : 'bottom' }}
uniapp引入vant报错Unclosed bracket
yy_demo的博客
10-27 825
可以在vant的lib里面的index.css中搜索format，然后在format括号的逗号后面，加一个空格。我是想按需引入的，所以创建了一个新的文件vant.config.js,然后在main.js中引入了这个文件。
小程序学习（15）：使用npm，以vant为例；解决安装完vant后一切正常，但是有的组件找不到，如grid宫格
随便写写
11-20 3482
2019年11月20日 09:06:08 说在开头： 1.我之前的小程序学习（七）是不对的，有些文件需要自己手动新建 2.这里没有grid组件，可能是vant版本的问题，如果是版本问题，建议删除老版本，安装新版本，我在这篇中有安装指定版本的vant 小程序学习（15）：使用npm，以vant为例 1.点击操作，创建package-lock.json 点击详情=》构建npm， 然后会自动创建pack...
解决在HBuilderX里用uniapp引入vant后在微信小程序里没反应的问题
weixin_56924782的博客
09-20 2630
解决在HBuilderX里用uniapp引入vant后在微信小程序里没反应的问题
uniapp中引入vant组件库时报错
06-10
3. 是否在pages.json或globalStyle中引入了vant组件库的样式文件。可以在globalStyle中添加以下代码： ``` "@import": [ "path/to/vant.css" ] ``` 如果还是无法解决问题，请提供具体的错误信息或代码片段，以便...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值