Unable to use scss classes directly in next js

I have this Layout.module.scss file in next js

.app {
  display: flex;
}

and in index.js file

when I am including the scss like this it is not working

import "./Layout.module.scss";

export default function Layout({ children }) {
  return (
    <div className='app'>
    </div>
  )
}

but when I include scss like this it is working

import styles from "./Layout.module.scss";

export default function Layout({ children }) {
  return (
    <div className={styles.app}>
    </div>
  )
}

I want to use the scss like the first one only, please let me know how I can do that, thank you.

>Solution :

First install sass dependency using npm:

npm install sass --save-dev

Then rename your file Layout.module.scss to Layout.scss

And use it like this :

import "./Layout.scss";

export default function Layout({ children }) {
  return (
    <div className='app'>
    </div>
  )
}