为何Checkbox联动菜单仅在非模块SCSS文件中生效？

是的，这个问题完全和SCSS模块的类名模块化机制有关，核心逻辑如下：

• SCSS模块的核心特性是类名局部化：它会给每个类名自动生成唯一的哈希后缀（比如原类名.checkbox会变成.Navbar_checkbox__XyZ123），以此避免不同组件间的样式冲突。
• 使用SCSS模块时，必须通过导入的styles对象引用类名（比如className={styles.checkbox}），才能让元素正确应用这个带哈希的局部类名。
• 如果你在HTML里直接写className="checkbox"（全局类名），而不是styles.checkbox，那么SCSS模块编译后的CSS选择器（针对.Navbar_checkbox__XyZ123）就无法匹配到元素，导致:checked伪类关联的菜单切换样式完全不生效。
• 换成普通SCSS后，类名是全局作用域的，className="checkbox"能直接匹配CSS里的.checkbox选择器，点击触发checked状态后，对应的样式自然正常生效。

另外还有一种可能场景：如果你的CSS选择器是#menuToggle:checked ~ .menu这类「全局id+模块类名」的组合，虽然id是全局的，但.menu会被编译成局部类名——这时候只要menu元素用了styles.menu，选择器是能匹配的，但如果写法有误（比如混用全局类名和模块类名却没正确引用），也会导致样式失效。

本质上就是SCSS模块的局部类名机制要求你必须通过styles对象关联类名，否则CSS选择器和DOM元素的匹配关系会断裂，最终导致交互失效。

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