SCSS 模块未在 NextJS 中加载

Question

我不确定问题出在哪里，因为我已经多次这样做了，没有任何问题，所以我认为我搞砸了。我将展示 Product.js 组件和模块文件，如果我还缺少任何其他内容，请告诉我（例如，也没有 next.config.js 文件）。

提前致谢！

产品.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，并访问所需的类：

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 模块会生成一个唯一的类名。它的类名不会是product，而是类似[filename]\_[classname]\_\_[hash]（带有唯一哈希）以避免名称冲突。

adding CSS module