Behavior when importing normal CSS files in components

[tough moss]

It looks like the document only covers the case where you import CSS files in your pages/_app.ts or app/layout.tsx. Where can I find what exactly happens when you import CSS files in your components?

[ionic cave]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[deep ember]

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 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)

[tough moss]

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?

[deep ember]

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

[deep ember]

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

[tough moss]

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

[deep ember]

check this which has this sentence which is related to this question

Global styles can be imported into any layout, page, or component inside the app directory.

[deep ember]

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

[tough moss]

okay, thank you!