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

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

解决Vue的表格中，expand只有某些行需要展开的问题。
解决Vue的表格中,expand只有某些行需要展开的问题. 参考文章: (1)解决Vue的表格中,expand只有某些行需要展开的问题. (2)https://www.cnblogs.com/jin- ...
解决vue在ie9中的兼容问题
vue 解决ie9的兼容问题当vue遇见ie9的时候,部署到服务器之后,打开居然是一片空白,vue是支持ie9的,这个时候就需要来一波兼容了参考尤大的解答 https://github.com/v ...
解决Vue打包部署到Nginx时，css样式不生效问题
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template><div class ...
七、Vue组件库：Element、Swiper（轮播专用组件）
一.vue的Element组件库官网:https://element.eleme.cn/#/zh-CN 1.1安装推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S或 n ...
swiper中ajax获取数据不能滑动问题
近期移动项目中,做的类似今日头条栏目效果,swiper中内容通过ajax获取,不能侧滑,暂时了解到的解决办法: 1.在ajax请求成功后绑定swiper容器: 2.在swiper中添加内容变化后初始 ...
Swiper 中常见的属性以及方法
Swiper的下载方法: swiper官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 1, npm i swiper@版本号 2,npm install -g cnpm --regi ...
轮播swiper中加视频video滑动不顺畅报错 property on ‘HTMLMediaElement‘: The provided double value is non-finite.
轮播swiper中加视频video滑动不顺畅报错TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': T ...

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

0 文章太长懒得看

1 出错原因

2 解决方法

2.1 更换导入语句

2.2 降低`Swiper`的版本

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

最新文章

热门文章

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

0 文章太长懒得看

1 出错原因

2 解决方法

2.1 更换导入语句

2.2 降低Swiper的版本

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

最新文章

热门文章

2.2 降低`Swiper`的版本