SASS父选择器在NextJS中不起作用

Question

我想使用SASS设计导航组件的样式。完成了所需的配置，还安装了sass软件包(npm-install-sass(。然后将样式导入到我的组件：

import styles from "../../styles/Home.module.scss";

这就是导航组件：

const Navigation = (props) => {
return (
<Fragment>
<div className={styles.navbar}>
<div>
<Link href="/">
<h1>Logo</h1>
</Link>
</div>
<div >
<ul>
<Link href="/about-us">
<a className={styles.navbarLink}>About Us</a>
</Link>
<Link href="/">
<a className={styles.navbarLink}>About Us</a>
</Link>
<Link href="/services">
<a className={styles.navbarLink}>Services</a>
</Link>
<Link href="/certificates">
<a className={styles.navbarLink}>Certificates</a>
</Link>
<Link href="/how-we-build">
<a className={styles.navbarLink}>How we build</a>
</Link>
</ul>
</div>
</div>
<Fragment>{props.children}</Fragment>
</Fragment>
);
};

我的锚样式没有正确应用，我尝试了：

&-link { // & is the parent selector (.navbar)
text-decoration: none;
color: #0cc6ff;
}

和

.navbar-link {
text-decoration: none;
color: #0cc6ff;
}

当我

console.log(styles.navbarLink) // shows undefined

创建单独的".class"而不嵌套或只选择".navbar a"即可

是我做错了什么，还是NextJs不支持"&"sass功能

Answer 1

问题不在于SASS，而不是像这样的样式：

<a className={styles.navbarLink}>Certificates</a>

我可以这样设置锚标签的样式：

<a className={styles['navbar-link']}>Certificates</a>