the css becomes available to all pages using that component. so if you declare .your-class you can use className="your-class" in those pages

note that the above applies to non-module css. [.module.css](https://nextjs.org/docs/app/building-your-application/styling/css-modules) files then check the docs

also note that importing non-module css files to any arbitrary component only works if
* you use the app router, or
* you use the pages router and the css file is inside node_modules (so not a local css file, but a third party css file)

I use app router and yes, I meant non-module css.

Does CSS have effect until the page is refreshed once loaded by any component?

And does it intelligently not load the CSS files multiple times?

i don't know fully how it works behind the scenes, but in my current understanding of it, it's equivalent to importing that css file to the root layout except the css only takes effect for pages using that component

it's available before the page is mounted just like global css

this one idk at all but likely yes. you can try it

okay thank you, and there’s no documentation for this I guess?

Probably I should create an issue/discussion on the repo to ask whether I can rely on its behavior

yes you can rely on it, the above sentence should affirm it

okay, thank you!