导入module.sass时如何仅保留active类不被CSS类名混淆？

你的问题核心是类名混淆工具（如CSS Modules）将.active也进行了重命名，导致组件中手动添加的原生.active类无法匹配样式。要实现.container保持混淆、.active不被混淆，只需在Sass中用:global()包裹.active类，标记它为全局类即可。

修改后的Sass代码 #

.container
  display: block
  border-radius: 15pt
  cursor: pointer
  padding: 10pt
  margin: 5pt
  background: red
  color: white
  &:global(.active)
    background-color: purple

编译后的效果 #

编译后.container仍会被混淆，而.active保持原生类名：

._container_gvhok_1 {
  display: block;
  border-radius: 15pt;
  cursor: pointer;
  padding: 10pt;
  margin: 5pt;
  background: red;
  color: white;
}
._container_gvhok_1.active {
  background-color: purple;
  color: white;
}

此时组件元素只要同时拥有混淆后的container类和原生.active类，就能正确触发选中状态的紫色背景样式。

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