Gatsby中SCSS Module样式被错误应用到无关组件是什么原因？

这不是框架Bug，是对SCSS Module的作用机制理解有误导致的。

• SCSS Module的作用域隔离仅对类选择器、ID选择器生效，原生元素选择器（比如你写的button）默认不会被添加哈希后缀，会被编译为全局样式。你在两个模块文件中都写了裸的button {}规则，最终编译后会变成两条全局的button样式，后加载的样式会覆盖先加载的，自然会出现样式跨组件生效的问题。
• 你在*.module.scss文件中重复引入global.scss，加上入口的一次引入，相当于全局样式被重复打包注入了3次，进一步提升了样式冲突的概率。

• 所有需要作用域隔离的样式都改用类选择器定义，不要直接使用元素选择器。比如将button {}改为.homeBtn {}、.navBtn {}，组件中通过import styles from './xxx.module.scss'后绑定className={styles.homeBtn}使用，此时类名会被自动添加哈希后缀，完全隔离不同模块的样式。
• 不要在*.module.scss中引入包含实际样式规则的全局SCSS文件，全局样式仅在入口文件引入一次即可。如果需要在模块中使用全局的SCSS变量、mixin、函数，可使用@use规则引入，或者配置构建工具实现全局变量自动注入，避免引入冗余样式。
• 如果确实需要在模块内对指定元素设置样式，可将元素选择器嵌套在局部类名下，限制生效范围：

.navContainer {
  button {
    // 样式仅作用于.navContainer内部的button元素，不会全局冲突
  }
}

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