在 NextJS 中编译后，Sass 样式抛出未定义

编程问答 2022-04-23

问题描述

我可以放心sass代码：

.link
  display: inline-table
  text-align: center
  align-self: center
  margin: 5px 15px
  font-size: 20px
  color: black
  text-decoration: none
  transition: 0.1s ease-in-out

.link:hover
  text-decoration: underline

.link-red:hover
  text-decoration: underline
  color: $color-red

而且我对 index.tsx 代码感到很平静：

<div>
   <a href={link} className={styles.link + " " + styles.linkRed}>{linktext}</a>
</div>

编译后，在出口处得到这段编译好的html：

<div>
   <a href="/auth/login" class="links_link__31hqZ undefined">Login</a>
</div>

如我们所见，样式 link 已成功编译并附加，但第二个文件变成了 undefined。

为什么第二个样式 link-red 变成了 undefined？

解决方法

因为你有 styles.linkRed 但在 css 你有 link-red 类和破折号。所以在 jsx 中你需要使用 styles['link-red']。

Next.js 目前没有自动 camelCase 的配置，但您可以关注 this discussion 了解更多详情

sasssasstsxtypescripttypescripttypescript