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>
  )
}

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

添加 CSS 模块

Answer 2

对于像我一样使用 Next.js 13 和 Turbopack 遇到此线程的任何人，目前 Turbopack 不支持开箱即用的 SCSS/Sass。进入您的 package.json 并--turbo从开发脚本行中删除，直到我们在 Turbopack 或插件中获得该功能。或者你可以只处理普通的 css 模块，它可以与 Turbopack 一起正常工作。

package.json（之前）

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

package.json（之后）

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