微信小程序使用vant以及在 app.wxss 中引入内置样式错误

  1. 详细引用过程请参见官网,但是引用过程中可能会报这种错误,如下
  2. 解决方案:修改成相对路径,
  3. 其次,在按照官方文档使用vant的内置样式时,可能也会出现 [ WXSS 文件编译错误] ./app.wxss File not found: @vant/weapp/common/index.wxss
  4. 解决:改成相对路径即可

OK,成功


注:

1.本人也是新手,文章不当之处,烦请大佬指正,感谢这位博主给的启发https://www.jianshu.com/p/54ed83b6c81a

2.一定要睁大眼睛看清楚是还是,别搞错了

要在微信小程序引入vant样式库,可以通过以下步骤操作: 1. 下载vant-weapp样式库 首先需要在GitHub上找到vant-weapp的官方仓库(https://github.com/youzan/vant-weapp),下载或克隆到本地。 2. 将vant-weapp引入微信小程序项目 将下载的vant-weapp文件夹整个复制到微信小程序项目的某个目录下,例如可以创建一个名为`components`的新目录,然后将vant-weapp文件夹放入其。 3. 在app.json引入组件 打开小程序的全局配置文件`app.json`,在`usingComponents`字段引入vant-weapp的所有组件。例如: ```json { "usingComponents": { "van-button": "/components/vant-weapp/button/index", "van-field": "/components/vant-weapp/field/index", // ...其他组件 } } ``` 注意路径需要根据实际存放位置调整。 4. 使用组件 在小程序的页面文件(.wxml),现在就可以使用这些引入的组件了。例如: ```xml <view> <van-button type="primary">按钮</van-button> <van-field label="文本" value="输入框内容" /> <!-- ...其他组件的使用 --> </view> ``` 5. 使用对应的样式文件 如果你还需要使用组件的样式文件,需要在全局样式文件`app.wxss`或对应的页面样式文件`.wxss`引入相应的样式文件。例如: ```css @import "/components/vant-weapp/button/style"; /* 引入按钮样式 */ @import "/components/vant-weapp/field/style"; /* 引入输入框样式 */ ``` 6. 开启微信小程序自定义组件编译 在微信开发者工具,需要开启对自定义组件的编译支持。在详情页,勾选使用npm模块,然后开启“使用npm模块”。 完成以上步骤后,你就可以在微信小程序使用vant-weapp提供的各种样式和组件了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值