《踩坑记录》vue中使用swiper@7.4.1，css文件引入失败

最新推荐文章于 2023-11-17 22:12:23 发布
最新推荐文章于 2023-11-17 22:12:23 发布
阅读量1.8k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leporc/article/details/122349326
版权

Vue swiper 样式错误 导入 swiper.min.css
关键词由CSDN通过智能技术生成

在vue项目中使用了swiper@7.4.1，完成了依赖下载导入、使用的语句都没有问题，导入css的语句复制了官网的，但是一直报错，把样式引入识别成引入依赖了

To install it, you can run: npm install --save swiper/css

上网查了各种方法尝试之后都没有效果，代码都快一个字符一个字符检查了，最后顺着样式引入的路径查了一下，发现没有swiper.css，只有文件swiper.min。css。。。以下是官网的样式引入语句

 

import 'swiper/css';

改成这样就可以了  import 'swiper/swiper.min.css'

快学点111
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue项目中导入swiper插件的方法以及遇到的问题
weixin_49768221的博客
09-17 2464
第一步：安装swiper插件 cnpm i swiper --save-dev 第二步：引入swiper 可以在组件中局部引入，也可以在index.html页面全局引入，以下是局部引入的方法 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 第三步：写轮播图代码 <div class="swiper-container"> <div class="swiper-wrapper">
Vue Swiper导入swiper.css报错This dependency was not found:swiper/dist/css/swiper.css
weixin_46836035的博客
07-28 1万+
Vue Swiper导入swiper.css错误 Vue使用swiper下 To install it, you can run: npm install --save swiper/dist/css/swiper.css 使用npm下载了：npm install vue-awesome-swiper --save 转到“ node_modules”文件夹， 找到“ vue-awesome-swiper”， 选择“ dist” 文档中没有要求的css文件一直报错找不到此文件。 之前：官方推荐使用 impor
记录错误：To install it, you can run: npm install --save swiper/css/swiper.css
qq_44755188的博客
08-20 1万+
使用npm下载了：npm install vue-awesome-swiper --save， 转到“ node_modules”文件夹，找到“ vue-awesome-swiper”， 选择“ dist”，文档中没有要求的css文件一直报错找不到此文件。 修改前： import 'swiper/dist/css/swiper.css' 修改后： import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css' .
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
道阻且长，行则将至。
12-04 6637
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Swiper插件，执行了npm install swiper vue-awesome-swiper --save，并且也引入了，按照他的提示执行最后还是报错 将main.js 中 import 'swiper/css/swiper.css' 应该替换为 import 'swiper/swiper-bundle.
vue2.x使用swiper7.4.1
????鱼干～
09-17 659
vue2.X使用swiper7.4.1
swiper引入js和css：Module not found: Error: Package path ./swiper-bundle is not exported from package ..
YY的博客
01-03 3856
引入swiper的js和css文件
vue-awesome-swiper 引入css样式文件报错等问题
bjyxszd_2026的博客
03-22 2430
引入css样式文件 这个错是我最开始就有的错误，因为在安装vue-awesome-swiper 就会默认安装swiper。我指定了vue-awesome-swiper的版本，但是没指定swiper的版本，默认安装版本为8.0.7。 所以在引入css文件的时候报错，在node_modules中的swiper路径下找确实没有这个文件 import 'swiper/css/swiper.css' 在把swiper版本降到2以后，css引入不报错 ，但是整个swiper组件根本就不显示 找了一两个小时最后把vu
解决vue中使用swiper插件问题及swiper在vue中的用法
10-18
在Vue中使用Swiper插件，首先需要理解Swiper本身的功能和特性。Swiper是一款强大的触摸滑动插件，尤其适合于移动设备上的应用，它提供了丰富的动画效果和交互功能，如焦点图、Tab切换、多图切换等。在Vue项目中集成...
vue 引入公共css文件的简单方法(推荐)
08-28
最后，我们可以在组件中使用 @import 语句来引入公共的 CSS 文件。例如： ```vue <!-- 内容 --> export default { name: 'app' } @import './assets/css/reset.css'; /* 引入公共样式 */ ``` 需要...
vue2.0使用swiper组件实现轮播效果
08-28
这将引入 Swiper 组件和其样式文件。 知识点三：HTML 页面代码 下面是我们的 HTML 页面代码： ``` <div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for=...
vue使用原生swiper代码实例
10-15
在介绍如何在Vue项目中使用原生Swiper实现轮播效果之前，我们先来了解一些基础知识点。 Vue.js 是一种用于构建用户界面的JavaScript框架，通过声明式的渲染、组件化开发、数据双向绑定等特点，使得Vue在前端开发中...
Vue Swiper导入css错误
qq_40845888的博客
10-20 7509
Vue使用swiper下 To install it, you can run: npm install --save swiper/dist/css/swiper.css 使用npm下载了：npm install vue-awesome-swiper --save 转到“ node_modules”文件夹， 找到“ vue-awesome-swiper”， 选择“ dist” 文档中没有要求的c...
vue项目中导入swiper插件的方法
weixin_52094928的博客
07-05 1758
vue项目中导入swiper插件的方法 1、安装swiper npm i swiper@3.4.2 -S 2、组件编写： swiper官方的使用方法分为4个流程： （1）、加载插件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; （2）、HTML内容 <template> <div class="swiper-container"> <div class="
vue中swiper用法
zhao_li_ming的博客
11-11 732
npm install swiper@5 main.js中引入 import 'swiper/js/swiper.min' import 'swiper/css/swiper.min.css' 然后 <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <d.
如何正确在Vue框架里使用Swiper
ximenxiafeng的专栏
12-25 1628
第一步：安装 npm i swiper (vue插件自带) 第二步：在当前页面里引入 import Swiper from 'swiper'; import 'swiper/css/swiper.min.css'; swiper.min.css的地址在node_modules下面，注意别引用错误 第三步：写HTML部分代码，其实可以去swiper官网copy代码，例如：https:/...
Vue Swiper 找不到swiper.css 报错This dependency was not found:swiper/dist/css/swiper.css
A_linyuan的博客
08-14 2910
Vue使用swiper下出错： This dependency was not found:swiper/dist/css/swiper.css To install it, you can run: npm install --save swiper/dist/css/swiper.css 解决： 官方说明了Swiper安装6.0版本或以上的话需要引入另外一个css import ‘swiper/swiper-bundle.css’ 替代 import ‘swiper/css/swiper.css’ 完整
vue项目中如何使用使用swiper
热门推荐
piaoyecanfeng的博客
04-22 3万+
一、在vue项目中安装swiper npm install swiper -S 二、在main.js中引入swiper.css import Vue from 'vue'; import "swiper/swiper.min.css" 三、在需要使用swiper的组件中引入swiper ，swiper必须放到mounted里 否在无效 <script> import Swiper from 'swiper'; export default { name: 'HelloWorld',
Vue3使用 swiper 详细总结 填坑分享
最新发布
曈欣的博客
11-17 1169
使用 swiper 的时候，遇到了一些问题，通过这篇文章总结一下。报错：To install them, you can run: npm install --save swiper/css swiper/vue。左右切换按钮无效，分页Pagination不显示。vue单文件组件中无法修改swiper样式
npm ERR! While resolving: didifarm@0.1.0 npm ERR! Found: swiper@7.4.1 npm ERR! node_modules/swiper npm ERR! swiper@"^7.3.4" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer swiper@"^5.2.0" from vue-awesome-swiper@4.1.1 npm ERR! node_modules/vue-awesome-swiper npm ERR! vue-awesome-swiper@"^4.1.1" from the root project什么意思？怎么解决
06-11
这个错误信息是由于在解决依赖关系时发现了冲突。你的项目需要使用vue-awesome-swiper@4.1.1，它需要依赖swiper@^5.2.0，但是你的项目中已经安装了swiper@7.4.1，两者版本不兼容，所以产生了冲突。 要解决这个问题，你可以尝试以下步骤： 1. 删除 package-lock.json 文件和 node_modules 文件夹 2. 运行 `npm cache clean --force` 命令清除缓存 3. 使用 `npm install vue-awesome-swiper@4.1.1 --save` 命令重新安装 vue-awesome-swiper 4. 如果还是出现冲突，可以尝试手动安装 swiper@^5.2.0，使用 `npm install swiper@^5.2.0 --save` 命令安装 5. 如果以上方法都无法解决问题，可以考虑升级 vue-awesome-swiper 或者 swiper 到最新版本，但是需要注意兼容性问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值