how do I import styles in a next js page

Question

I have a styles folder in my app and it contains a file named Home.module.css .

But whenever I add this code in my pages/index.js , i get an error, the error is always the same, 404 page not found..

import styles from '../styles/Home.module.css' 

Please help me get out of this problem.

Answer 1

Following documentation you should just import styles without naming it:

import '.../styles/Home.module.css'

But, if you want to use varibales you can install SASS and import your styles by name:

import variables from '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}

NOTE: pay attention to extension. If you are using SASS the extension of file should be SCSS .