Vue-awesome-swiper: No swiper.css

[arthur-fontaine]

BUG REPORT TEMPLATE

Vue.js version and component version

@vue/cli: 4.4.1
swiper: 6.0.4
vue-awesome-swiper: 4.1.1

Reproduction

I think everywhere, just install with npm install swiper vue-awesome-swiper --save

What is Expected?

No error when compile.

What is actually happening?

ERROR  Failed to compile with 1 errors

This dependency was not found:

* swiper/css/swiper.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/setting-box-carousel/SettingBoxCarousel.vue?vue&type=script&lang=js&

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

And in node_modules/swiper/ there isn't any cssfolder.

---

EDIT:

I found a (temporary?) solution. I use import 'swiper/swiper-bundle.css' in my scss file.

EDIT2:
As @Charlie50503 said, use import "swiper/swiper-bundle.min.css";.

[cynthiawupore]

+1

[LJ906]

+1

[jufjzq]

import 'swiper/dist/css/swiper.css'

[ygj6]

From the official README document, we can see :

Global Registration

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

Local Registration

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

[AndrewBogdanovTSS]

@arthur-fontaine it's not a temporal solution, it's in fact how you should use it if you want to target Swiper v.6

[Charlie50503]

please update dos
from
import 'swiper/swiper-bundle.css'
to
import "swiper/swiper-bundle.min.css";

[akshay-rajput]

I went to npm site and used command specified there to install it. I realised later that we need to install 2 packages, 1st swiper and 2nd vue-awesome-swiper. But I still got the error because as @Charlie50503 pointed out then new path is
import "swiper/swiper-bundle.min.css";

[AndrewBogdanovTSS]

To anyone coming to this topic later, if you are using Swiper 6 as a dependency - follow it's official docs on how to reference css, vue-awesome-swiper use it as a peer dependency and doesn't add any extra logic on top of already existing swiper CSS structure