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

Question

我对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？

Answer 1

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

Next.js目前还没有自动camelCase的配置，但您可以按照本讨论了解更多详细信息