SwiperJS v8 SCSS

user_2740334 0
Viewed 442

I've looked everywhere for a simple answer to this and I can't find it. I'm used to importing swiper (v6) styles in my main.scss file like this:

@import "~swiper/src/swiper"

I gather something has changed in the way this has to work. But I can't get my head around it from the docs. Doing the following with Swiper (v8)

@import 'swiper/bundle'

Which results in:

Error: File to import not found or unreadable

And every other which way I can think of doing it doesn't work. Has anybody gone from 6 to 8 and care to shed some light?

swiper.js sass
1 Answers

It had the same issue and I found the solution in this answer.

You import the base Swiper styling like this:

@import "~swiper/swiper";

And then for every module you use (like navigation or pagination), you import the corresponding styling like this:

@import "~swiper/modules/navigation/navigation";
@import "~swiper/modules/pagination/pagination";

You can go to your node_modules/swiper/modules folder to see which modules are available.

user_148795000
Related