NextJS CSS module not working / weird behaviour(?)

Philipp Preuss 0
Viewed 21

total amateur here – please be kind :)

I am currently experimenting a little bit with NextJS and set up a project some while ago. I used CSS modules here and there and a week ago, everything worked just fine. Just now I re-opened my projected to learn that my CSS modules partially do not work anymore.

Part of the "affected" file structure:

components
├── styles
|   └─Navbar.module.css
|   └─CustomList.module.css
└── Navbar.js

Now, to make it simple, I tried the following very small thing in Navbar.js:

import styles from "./styles/Navbar.module.css";
<div className={styles.test}>
    {children}
</div>

When I import Navbar.module.css the following CSS will have no effect and neither class nor css is applied to the HTML (also checked in the Browser's inspect window). As soon as I replace Navbar with CustomList: CustomList.module.css everything works again as expected.

.test {
    background-color: red;
}

Does anyone have an explanation for this behaviour? (please!)

next.js css
1 Answers

Try this

import styles from "./styles/Navbar.module.css";
<div className="test">
    {children}
</div>
useraVNl10
Related