解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题

最新推荐文章于 2025-09-09 18:33:16 发布

原创最新推荐文章于 2025-09-09 18:33:16 发布 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #css

前端专栏收录该内容

29 篇文章

订阅专栏

本文讲述了在Vue项目中，如何修正因更新Swiper至v6.4.15后引入CSS文件的错误，涉及修改import语句和选择适当版本的方法。解决过程包括更换老版的'swiper/css/swiper.css'为新版'swiper/swiper-bundle.css'，以及针对6.0.0版本API变化进行适配。

0 文章太长懒得看

将语句：import 'swiper/css/swiper.css'
修改为：import 'swiper/swiper-bundle.css'

1 出错原因

报错提示为 * swiper/css/swiper.css in ./src/main.js … ：
在这里插入图片描述
可以发现是css的引用出了问题。
vue-awesome-swiper 中的Global Registration写道：

// import style
import 'swiper/css/swiper.css'

这是Swiper老版本的的引入方式，当使用命令npm install swiper vue-awesome-swiper --save安装Swiper时，安装的是最新版本Swiper v6.4.15（2021/2/19），同时可以发现官网中关于swiper.css的引入方法变为了import 'swiper/swiper-bundle.css';。

2 解决方法

2.1 更换导入语句

将语句：import 'swiper/css/swiper.css'
修改为：import 'swiper/swiper-bundle.css'

2.2 降低`Swiper`的版本

查看Swiper的 changelog 后发现在6.0.0版本有一次大改，其中就包括：
在这里插入图片描述
所以推断安装6.0.0之前的版本可以解决该问题。
卸载当前Swiper：npm uninstall swiper
安装低版本的Swiper：npm install swiper@5.4.5 --save