reactjs - NextJS 中未加载 SCSS 模块

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] 的东西(带有唯一的 hash)以避免名称碰撞。

adding CSS module