NextJS 中未加载 SCSS 模块

Question

我不确定问题出在哪里，因为我已经多次这样做没有问题，所以我想我搞砸了。我将展示 Product.js 组件和模块文件，请让我知道是否还有任何遗漏（例如，也没有 next.config.js 文件）。

提前致谢！

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 文件

.product {
  max-width: 300px;

  & img {
    width: 100%;
  }
}

Answer 1

当使用 CSS 模块时，你应该将你的 styles 对象传递给 className，并访问所需的 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>
  )
}

这是因为 CSS 模块将生成一个唯一的 class 名称。它的 class 名称不会是 product，而是类似 [filename]\_[classname]\_\_[hash] 的名称（具有唯一哈希值）以避免名称冲突。

adding CSS module

NextJS 中未加载 SCSS 模块

SCSS modules not loading in NextJS

sass

reactjs

css-modules

next.js