third party libraries.

[tavo379]

I have a question, basically it is how can I import certain libraries and initialize them, specifically Swiper, according to the Swiper documentation I can do something like this

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

const swiper = new Swiper(...);

I used something similar inside scripts in my theme, enabling swiper in the window as the documentation says, but I have 2 questions: how am I supposed to initialize swiper with the window variable and the other is how am I supposed to import the styles, because if I import the styles directly it gives me an error.

import Swiper from "swiper";
import 'swiper/css'; //no working

window.Swiper = Swiper;

???

thanks in advanced.

[gregsullivan]

Hello again!

On the CSS front, I would suggest looking at the ESBuild documentation for importing CSS:

https://esbuild.github.io/content-types/#css-from-js

Your mileage may vary on this, but I often integrate what I need from JavaScript libraries in the ./tailwind/custom/components folder. Then they become part of my overall Tailwind build, and I can edit them as necessary. (I find that I can often remove large chunks of the CSS based on the functionality I'm using from a given library.)

In terms of initializing Swiper, I think you may need something more like this:

window.swiper = new Swiper(...);

I don't have any direct experience with Swiper, though—if that doesn't work, please let me know what error you're seeing!

[AlePeace]

Hey @tavo379 i have the same problem like you. I follow a tip that the great @gregsullivan suggested on another thread. Because ESBuild output the css imported in the js, in the same folder where the output of the js file is, you can copy the content of the css generated in that folder in components.css or you can copy the entire file css generated in components folder, and it works very nice. I hope i can make clear, sorry.

[tavo379]

Thank you soo much guys.