As a total amateur in web development, I kindly ask for your understanding :)
I have been tinkering with NextJS and had set up a project some time ago. Using CSS modules sporadically, everything was functioning perfectly until just recently when I reopened my project to discover that some of my CSS modules were no longer working.
Here is a glimpse of the file structure that has been "affected":
components
├── styles
| └─Navbar.module.css
| └─CustomList.module.css
└── Navbar.js
To simplify things, I attempted the following small change in Navbar.js:
import styles from "./styles/Navbar.module.css";
<div className={styles.test}>
{children}
</div>
Upon importing Navbar.module.css, the specified CSS properties failed to take effect. The class and styling were not applied to the HTML elements (confirmed via browser inspect window). However, replacing 'Navbar' with 'CustomList': CustomList.module.css resolved the issue and everything worked as expected again.
.test {
background-color: red;
}
Can anyone offer insight into why this behavior is occurring? (please help!)