Angular中@extend与styles.scss全局样式的选型对比

关于@import + @extend的情况 #

• 编译后代码表现：当你在多个组件SCSS中通过@import引入包含SASS占位符（比如%btn-common）的文件，再用@extend继承样式时，每个组件的CSS都会被插入一份通用样式的完整代码。比如组件A和B都继承这个按钮样式，编译后两个组件的样式块里都会重复出现相同的按钮规则。
• 体积与性能影响：这种重复会直接增加最终打包后的CSS体积，虽然Angular的构建工具会做基础优化，但预编译阶段产生的重复代码很难被完全消除。如果复用组件数量多，冗余代码会逐步累积，拖慢CSS加载速度，也会增加浏览器解析样式的开销。

全局styles.scss方案的优劣 #

• 编译后代码表现：在全局样式文件里定义的通用按钮类（比如.app-btn-common）只会被编译一次，所有组件只要给按钮加上这个类，就会共享同一段CSS代码，完全没有重复。
• 维护性：所有通用按钮的样式规则都集中在一处，修改样式时不用逐个组件查找，统一管理更高效。建议给类名加上专属命名空间（比如前缀app-），避免和第三方UI库的样式冲突。
• 性能：因为代码无重复，打包后的CSS体积更小，浏览器加载更快，渲染时也不需要处理冗余的样式规则，整体性能更优。

总结建议 #

如果按钮需要在多个组件中复用，优先选择全局styles.scss方案。@extend更适合组件内部的小范围样式复用，或者需要基于通用样式做差异化调整的场景，但跨组件的通用样式复用用全局方案更省心、性能更好。

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