NextJS中SASS父选择器(&)失效及样式类名未定义问题

首先可以明确的是：Next.js完全支持Sass的&父选择器特性，你的问题出在CSS Modules的局部作用域规则和&的编译行为不匹配上，下面具体拆解：

为什么你的两种写法都不生效？ #

1. 第一种写法：&-link的问题

在你的.module.scss文件中，当你写：

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

CSS Modules会给局部类名添加唯一哈希后缀，比如.navbar会被编译成类似.navbar_abc123的类名。此时&代表的是完整的父选择器（包括哈希），所以&-link会被编译成.navbar_abc123-link，而不是你预期的.navbar-link。

但你在组件中引用的是styles.navbarLink，这个属性对应的是.navbar-link（编译后是.navbar-link_def456），和实际生成的.navbar_abc123-link完全不匹配，自然样式无法生效，console.log(styles.navbarLink)也会返回undefined。

2. 第二种写法：.navbar-link的问题

如果你的Sass代码是单独定义：

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

理论上styles.navbarLink应该能拿到正确的类名（CSS Modules会自动把kebab-case的类名转为camelCase属性），但没生效可能有两个原因：

• 你的<a>标签被Next.js的<Link>包裹，默认的浏览器a标签样式优先级更高，你可以尝试添加!important临时验证（不推荐长期使用，建议提升选择器优先级）；
• 你可能在Sass中把.navbar-link嵌套在了某个未生效的选择器里，导致样式没有被正确编译。

正确的解决办法 #

根据你的需求，推荐两种直观的写法：

办法一：在.navbar内部直接定义子元素类

保持类名和组件引用一致，Sass代码如下：

.navbar {
  // 先定义.navbar的基础样式
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  
  // 定义.navbar内部的navbarLink样式
  .navbarLink {
    text-decoration: none;
    color: #0cc6ff;
    margin-left: 1.5rem;
    // 可以添加hover等交互样式
    &:hover {
      color: #00a8e8;
      transition: color 0.3s ease;
    }
  }
}

组件中依然使用className={styles.navbarLink}，这样编译后的类名会是.navbar_abc123 .navbarLink_def456，样式优先级足够，能覆盖默认a标签样式。

办法二：使用&引用父选择器的子元素

如果你习惯用kebab-case的类名，也可以这样写：

.navbar {
  // 基础样式
  ...

  & .navbar-link {
    text-decoration: none;
    color: #0cc6ff;
    margin-left: 1.5rem;
  }
}

组件中同样可以用styles.navbarLink（CSS Modules自动转驼峰），或者styles['navbar-link']直接访问kebab-case的属性名。

额外提示 #

你提到用.navbar a能生效，是因为这个选择器直接选中了.navbar内部的所有a标签，绕过了类名的局部作用域问题，但这种写法不够精准，容易影响其他不需要该样式的a标签，还是推荐使用类名的方式。

内容的提问来源于stack exchange，提问作者Hatprob