Styles are not loading in nested layouts

[devhik0]

I have a nested layout in my app/dashboard/layout.tsx and I am importing a style into it like import "./style.css", however I don't see that styles at network tab. When I put same style in root layout, it's loading and showing at network tab. Please help me

[icyJoseph]

I had understood, that global stylesheets, IIRC, may only be imported in the root layout, similarly to how it was only possible to import those in pages/_app.js.

And that, CSS Modules, you can import in your nested layout, and apply a class name at that level:

import styles from './styles.module.css'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

Something like that...

.dashboard  p {
  color: red;
}

For example, that'd make apply a rule to p tags within this layout, to try and make them red.

However...

I tested in Next, with a nested dashboard layout, that imports a CSS file, and it seems to work, see here, https://stackblitz.com/edit/nextjs-pwpamw7r?file=app%2Fdashboard%2Fpage.tsx,app%2Fdashboard%2Flayout.tsx,app%2Fdashboard%2Fglobal.css,app%2Fpage.tsx

[icyJoseph]

What Next.js version do you have? Could you share some pseudo-code or repository?

[devhik0]

Thanks i solved it already, my styles was being used for different pages under that layout and cuz of those are not used, i thought that were not loaded. More i didnt see those in network tab or in page, i was just curious. When i try to find that styles in devtools, i saw those and verified my style loads. Basically it was my bad and i fixed it 😄 Also its how my layout is looking and its working as expected.

import "@/public/docsupport/chosen.css";
export default function DashboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div>