Hi guys,

I am building a project with Nextjs 13 app directory and i am using css modules to apply styling to my components. Now for some reason, my styling is not working and i've been looking at it for a while now but too bad can't seem to find the problem. That's why im seeking help.

I have the following components 'Menu' now, and for test i just used some fake content and dummy styling:

import layoutStyles from "@/styles/Layout.module.css";
import buttonStyles from "@/styles/Button.module.css";
import messageStyles from "@/styles/Message.module.css";
import styles from "@/styles/layout.module.scss";

const Menu = async () => {
    return (
        <>
        <div className={styles.layout}>OF niet dan?</div>

        <div className={layoutStyles.container}>
          <div className={messageStyles.success}>
            Something has been successfully done.
          </div>
          <br />
    
          <div className={messageStyles.error}>Oop! We ran into a problem.</div>
    
          <br />
          <button
            className={buttonStyles.button}
          >
            I'm a button
          </button>
        </div>
        </>
      );  
}

export default Menu;

And here is for example the styling inside Button.module.css

.button {
    padding: 20px 30px;
    background: #2196f3;
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
    outline: none;
    border: none;
    cursor: pointer;
  }
  
  .button:hover {
    background: #e91e63;
  }

But when i look at the screen, its not shwoing any styles. It's also not downloading the file when i look at the Network tab in developer tools.