SCSS modules not loading in NextJS

Question

I'm not sure what the problem is, as I've done this numerous times with no issues, so I'm thinking I messed something up. I'll show the Product.js component, and the module file, and please let me know if there's anything else I'm missing (for example, there's no next.config.js file either).

Thanks in advance!

Product.js

import { Card } from '@material-ui/core'
import styles from '../styles/Products.module.scss'

export default function Product({ product }) {
  console.log(product)
  return(
    <Card className="product">
      <img src={product.main_image} />
      {product.name && product.name}
    </Card>
  )
}

Products.module.scss file

.product {
  max-width: 300px;

  & img {
    width: 100%;
  }
}

Answer 1

when using CSS module you should pass to className your styles object, and accessing the desired class:

import { Card } from '@material-ui/core'
import styles from '../styles/Products.module.scss'

export default function Product({ product }) {
  console.log(product)
  return(
    <Card className={styles.product}>
      <img src={product.main_image} />
      {product.name && product.name}
    </Card>
  )
}

this because CSS Module will generate an unique class name. Its class name won't be product, but something like [filename]\_[classname]\_\_[hash] (with a unique hash) to avoid name collision.

adding CSS module

Answer 2

For anyone coming across this thread using Next.js 13 with Turbopack like I did, SCSS/Sass is not currently supported out of the box with Turbopack. Go into your package.json and remove --turbo from the line with your dev script until we get that functionality within Turbopack or a plugin. Or you can just deal with normal css modules, which work fine with Turbopack.

package.json (before)

  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

package.json (after)

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

EDIT Aug 2024: It looks like this might now be supported which means this may no longer be necessary. I have not tested this. https://nextjs.org/docs/app/api-reference/turbopack#css-and-styling