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 模块时，您应该将您的 className 对象传递给 styles，并访问所需的类：

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

adding CSS module

NextJS 中未加载 SCSS 模块

1 个答案: