如何在Next.js的module.scss文件中引用通用类名

问题核心：CSS Modules默认会对所有类名添加哈希前缀，你写的.aaaa会被编译成类似.aaaa_xxxx的唯一类名，但组件中使用的是未加哈希的"aaaa"类，导致样式不匹配。

直接用以下方法实现，无需子选择器：

方法1：使用:global()伪类包裹单个全局类 #

修改你的test.module.scss：

// test.module.scss
.wrapper {
  /* 局部样式保持不变 */
}

:global(.aaaa) {
  background-color: red;
}

这样.aaaa会被识别为全局类，不会被添加哈希前缀，组件里的className="aaaa"就能正常匹配样式。

方法2：批量定义全局类 #

如果有多个通用类，可以把它们放在同一个:global块中：

// test.module.scss
.wrapper {
  /* 局部样式 */
}

:global {
  .aaaa {
    background-color: red;
  }
  .bbbb {
    color: blue;
  }
}

原理：CSS Modules通过哈希后缀实现局部作用域隔离，:global()标记的类会跳过哈希处理，保留原始类名，从而实现全局通用类的样式生效。

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