解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题
0 文章太長(zhǎng)懶得看
將語(yǔ)句:import 'swiper/css/swiper.css'
修改為:import 'swiper/swiper-bundle.css'
1 出錯(cuò)原因
報(bào)錯(cuò)提示為 * swiper/css/swiper.css in ./src/main.js … :
可以發(fā)現(xiàn)是css的引用出了問(wèn)題。
vue-awesome-swiper 中的Global Registration寫道:
這是Swiper老版本的的引入方式,當(dāng)使用命令npm install swiper vue-awesome-swiper --save安裝Swiper時(shí),安裝的是最新版本Swiper v6.4.15(2021/2/19),同時(shí)可以發(fā)現(xiàn)官網(wǎng)中關(guān)于swiper.css的引入方法變?yōu)榱薸mport 'swiper/swiper-bundle.css';。
2 解決方法
2.1 更換導(dǎo)入語(yǔ)句
將語(yǔ)句:import 'swiper/css/swiper.css'
修改為:import 'swiper/swiper-bundle.css'
2.2 降低Swiper的版本
查看Swiper的 changelog 后發(fā)現(xiàn)在6.0.0版本有一次大改,其中就包括:
所以推斷安裝6.0.0之前的版本可以解決該問(wèn)題。
卸載當(dāng)前Swiper:npm uninstall swiper
安裝低版本的Swiper:npm install swiper@5.4.5 --save
總結(jié)
以上是生活随笔為你收集整理的解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 解决前后端base64编码传递时的中文乱
- 下一篇: 00-基于Vue的博客项目展示