在Next.js中使用Sass嵌套选择器失效：无法实现主题切换或激活菜单功能

刚好之前在Next.js项目里踩过Sass嵌套失效的坑，给你梳理下可能的原因和对应的解决办法，应该能帮你搞定主题切换、菜单激活这些需求！

可能的原因 #

• 未安装Sass依赖：Next.js默认不内置Sass编译支持，必须手动安装对应的包，很多人容易漏掉这一步。
• 文件扩展名错误：嵌套是SCSS/Sass的特性，如果你把样式文件命名为.css，编译器根本不会处理嵌套语法，自然失效。
• CSS Modules使用不当：如果用CSS Modules隔离样式，嵌套时没有正确处理全局/局部类名，或者没有用&引用父选择器，会导致样式不生效。
• 样式优先级被覆盖：嵌套的选择器权重不够，被全局样式或者其他高权重样式覆盖，看起来像是嵌套没起作用。
• Next.js版本/配置问题：旧版本的Next.js（12及以下）需要手动配置Sass选项，新版本（13+）虽然自动支持，但App Router下的样式引用规则有变化，没遵守的话也会出问题。

对应的解决方案 #

1. 正确安装Sass依赖 #

首先确保项目里装了sass包（注意是sass，不是已经废弃的node-sass）：

npm install sass
# 或者用yarn
yarn add sass

2. 检查并修改样式文件扩展名 #

把你的样式文件改成.scss（推荐，因为SCSS语法和CSS更接近，嵌套写法更直观），如果习惯Sass的缩进语法可以用.sass，但SCSS更适合大多数场景。

3. 正确使用嵌套语法与CSS Modules #

全局样式场景（比如主题切换）

在全局样式文件（比如app/globals.scss或者styles/globals.scss）里直接写嵌套：

// 主题切换嵌套示例
.theme-dark {
  .page-container {
    background-color: #121212;
    color: #ffffff;
  }

  .nav-item {
    &:hover {
      background-color: #333333;
    }
  }
}

.theme-light {
  .page-container {
    background-color: #ffffff;
    color: #333333;
  }
}

CSS Modules场景（组件内样式）

如果用CSS Modules隔离组件样式，需要全局类名（比如主题类、激活类）时，用:global()包裹，同时用&引用当前组件的类：

// Card.module.scss
.card {
  padding: 1.5rem;
  border-radius: 8px;

  // 结合全局主题类的嵌套
  :global(.theme-dark) & {
    background-color: #2d2d2d;
    border: 1px solid #444444;
  }
}

// NavItem.module.scss
.nav-item {
  padding: 0.5rem 1rem;

  // 菜单激活状态的嵌套
  &.active {
    color: #0070f3;
    font-weight: 600;
    border-left: 3px solid #0070f3;
  }
}

4. 排查样式优先级问题 #

打开浏览器DevTools，选中目标元素查看样式面板，看看你写的嵌套样式是不是被划掉了（说明被更高权重的样式覆盖）。可以通过以下方式调整：

• 增加选择器的权重（比如多嵌套一层父类）
• 避免滥用!important，但如果是临时调试或者特殊场景可以先用（不推荐长期使用）

5. 适配Next.js App Router（13+） #

如果你用的是App Router：

• 全局样式必须放在app/globals.scss，并在layout.tsx中导入
• Server Component不能直接导入样式文件，需要把样式放在Client Component里，或者用className传递类名

示例：菜单激活状态实现 #

最后给你一个完整的菜单激活状态嵌套示例，直接就能用：

// styles/globals.scss
.nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #f5f5f5;
}

.nav-link {
  text-decoration: none;
  color: #333;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;

  &.active {
    background-color: #0070f3;
    color: white;
    font-weight: bold;
  }

  &:hover {
    background-color: #e0e0e0;
  }
}

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