Currently, I am delving into the world of Next.js and encountering some challenges with locally scoped CSS modules.
In my project, I have an about directory which contains a layout component. Strangely, the styles applied to the layout component are not being reflected on the about page.
layout.jsx:
import styles from "./styles.module.css"
export default function AboutLayout({ children }) {
return (
<>
<nav>About NavBar</nav>
<main className={styles.main}>
{children}
</main>
</>
)
}
styles.module.css:
.main {
min-height: 100vh;
display: grid;
place-content: center;
background-color: #333;
}
Despite diligently following the instructions in the Next js CSS Modules documentation, my CSS styles simply refuse to take effect.
File Structure
https://i.stack.imgur.com/qLE7E.png
As for the versions, I am utilizing Next js version 13.2.4 and Node js version 18.15.0