Where should I import css?

[ShahriarKh]

In a React project, I have many components across different pages that use Swiper, and I'm wondering if I should import the css files in the top-level layout file (Next js) so all pages and components have access to it; or import it in every component.
My main concern is the final bundle size and tree-shaking.
Which method do you recommend?
And is there a difference between css & scss if I don't want to modify the Swiper styles (and just import them)?

[SaroGFX]

How about abstracting the swiper inside it's own component, and re-using that for each of your instances?

Regarding the css, I did not notice any difference/

[ShahriarKh]

You mean something like:

// swiper
import { Swiper } from 'swiper/react';

export default function MySwiper({children, ...props}) {
    return <Swiper {...props}>{children}</Swiper>
}

?
I do import Swiper to every component that needs it.

[SaroGFX]

Yeah exactly, just import the css there, this way you only have to import it one time.