Next.js 13中使用.module.scss时深色模式样式不生效问题

问题根源 #

SCSS模块会自动为类名添加唯一哈希（比如.heading会变成类似.heading_xyz123），当你写.dark .heading时，这里的.heading是原始类名，无法匹配模块生成的哈希类名，导致深色模式样式失效。而普通SCSS文件不会修改类名，所以能正常匹配。

修复方案 #

方案一：用:global()包裹全局选择器 #

修改你的main.module.scss，将全局的.dark类用:global()包裹，让它保持全局作用域，同时保留.heading的模块化哈希：

.heading {
  /* 基础样式 */
  font-size: 2rem;
  color: #333;
}

:global(.dark) .heading {
  color: #f5f5f5;
  background-color: #1a1a1a;
}

这样.dark会匹配HTML根元素上的全局类，.heading则是模块生成的哈希类，两者组合就能正确选中元素并应用深色样式。

方案二：使用CSS变量（更优雅的长期方案） #

如果你的主题切换是全局的，推荐用CSS变量统一管理颜色，避免重复写选择器：

1. 在全局SCSS文件（比如globals.scss）中定义主题变量：

:root {
  --heading-text-color: #333;
  --heading-bg-color: #fff;
}

.dark {
  --heading-text-color: #f5f5f5;
  --heading-bg-color: #1a1a1a;
}

2. 在main.module.scss中直接使用变量：

.heading {
  font-size: 2rem;
  color: var(--heading-text-color);
  background-color: var(--heading-bg-color);
}

这种方式不用关心类名哈希，变量会根据全局主题自动切换，代码更简洁易维护。

验证方法 #

打开浏览器开发者工具，查看组件元素的类名，确认.heading已被转换成带哈希的类（比如heading__abc123），然后检查深色模式下的CSS规则，看是否有匹配该哈希类的选择器生效。

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