Cannot important swiper/css

[Naksgh]

Hi all, running _tw underscore theme (WordPress + Tailwind), and having a problem getting Swiper to work.

I am importing the bundles like so:

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

Also tried:

import Swiper from 'swiper';
import 'swiper/css';

It looks like the core JavaScript and functionality are being imported correctly -I can see Swiper classes dynamically added to the DOM. However, the CSS appears to be missing. When I inspect the .swiper wrapper, none of the expected styles from classes like .swiper, .swiper-wrapper, etc. are applied, which suggests that swiper.css isn’t being imported properly. I’ve already run npm run build/prod to compile my imported files, but the CSS still isn’t coming through. Does anyone know a fix or workaround for this?

[vegetable-bits]

@Naksgh I'm using wp-scripts with a custom wordpress theme. It works well for me, I think the problem may be in your bundler setup?

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/

import Swiper from 'swiper';
/* eslint-disable import/no-unresolved */
import { Navigation, Pagination, Autoplay, FreeMode } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/free-mode';
import 'swiper/css/autoplay';

// import Swiper from 'swiper/bundle';
// import 'swiper/css/bundle';
/* eslint-enable import/no-unresolved */
js

[Naksgh]

Thanks @vegetable-bits for your reply. I was importing correctly but for some reason on the stack that I'm using (underscore tailwind wordpress theme), I had to manually bring the swiper-bundle.min.css file into a folder that tracks/compiles all css files into production ready stylesheet. Once I manually dropped the swiper-bundle.min.css file into the tracked folder and ran build command everything started working.

Thanks again.

[vegetable-bits]

@Naksgh But that sounds not like a clean solution. You can also import from node_modules import 'swiper/swiper.min.css