3

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?

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Grimmrobe
  • 31
  • 2

2 Answers2

6

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.

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
sofiepatoor
  • 61
  • 1
  • 5
1

Building on Sofie's answer, if you are importing the scss from the node_modules folder and want to know all the modules that are available, there is a list of them on the Swiper website here: https://swiperjs.com/swiper-api#modules. This will be a list of modules from the latest version swiperjs.

If you are looking for a quick copy and paste to import all the modules from your node_modules folder into your main scss file here is a list of all the modules:

// Core
@import "../../node_modules/swiper/swiper.scss";

// Modules
@import "../../node_modules/swiper/modules/a11y/a11y.scss";
@import "../../node_modules/swiper/modules/autoplay/autoplay.scss";
@import "../../node_modules/swiper/modules/controller/controller.scss";
@import "../../node_modules/swiper/modules/effect-cards/effect-cards.scss";
@import "../../node_modules/swiper/modules/effect-coverflow/effect-coverflow.scss";
@import "../../node_modules/swiper/modules/effect-creative/effect-creative.scss";
@import "../../node_modules/swiper/modules/effect-cube/effect-cube.scss";
@import "../../node_modules/swiper/modules/effect-fade/effect-fade.scss";
@import "../../node_modules/swiper/modules/effect-flip/effect-flip.scss";
@import "../../node_modules/swiper/modules/free-mode/free-mode.scss";
@import "../../node_modules/swiper/modules/grid/grid.scss";
@import "../../node_modules/swiper/modules/hash-navigation/hash-navigation.scss";
@import "../../node_modules/swiper/modules/history/history.scss";
@import "../../node_modules/swiper/modules/keyboard/keyboard.scss";
@import "../../node_modules/swiper/modules/manipulation/manipulation.scss";
@import "../../node_modules/swiper/modules/mousewheel/mousewheel.scss";
@import "../../node_modules/swiper/modules/navigation/navigation.scss";
@import "../../node_modules/swiper/modules/pagination/pagination.scss";
@import "../../node_modules/swiper/modules/parallax/parallax.scss";
@import "../../node_modules/swiper/modules/scrollbar/scrollbar.scss";
@import "../../node_modules/swiper/modules/thumbs/thumbs.scss";
@import "../../node_modules/swiper/modules/virtual/virtual.scss";
@import "../../node_modules/swiper/modules/zoom/zoom.scss";

These modules are correct for the 9.4.1 release. There may be more modules added in future releases.

Note: I develop all my styles in my dev/styles folder, so go back to folder levels to my project root with the ../.. command in the file path, then go to into the node_modules etc folder that lives in my root directory. You will need to customise the relative path to the node_modules folder to suit your needs.

I also comment out all of the import module lines so they aren't all added to my css styles, then only uncomment and import the styles I need for my project. This keeps the CSS stylesheet as small as possible.

Henry Reith
  • 11
  • 3
  • Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly [edit] your answer to include additional details for the benefit of the community?** – Jeremy Caney Jun 30 '23 at 04:47