全局样式必须配置在angular.json的projects→[项目名]→architect→build→options→styles数组中，路径相对于项目根目录，顺序决定层叠优先级；组件样式须通过@Component的styleUrls或styles声明，且默认受ViewEncapsulation.Emulated隔离。
全局样式和组件样式不是“选一个用”，而是必须分清楚谁管什么——全局文件负责重置、设计令牌、框架集成；组件样式只处理本组件内结构微调，且不能靠@import硬引全局路径。
全局CSS必须加在angular.json的build.options.styles里
加错位置，ng build --prod后样式就彻底消失。常见错误是塞进serve.options.styles或项目根级：本地ng serve能看见，构建产物里没这回事。
- 路径必须相对于
angular.json所在目录（即项目根），写"src/styles.scss"✅，写"assets/styles.css"❌（缺src/） - 顺序 = 层叠优先级：
"src/styles/reset.scss"→"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"→"src/styles.scss" - 改完必须重启
ng serve，热更新不监听angular.json
组件SCSS里想用$primary-color？别@import，配includePaths
手动在每个组件里写@import '../../../styles/_variables.scss'，路径一变就报错，还可能触发variable is undefined。正确做法是统一配置。
- 把变量抽成
src/styles/_variables.scss（注意下划线前缀） - 在
angular.json的build.options.stylePreprocessorOptions.includePaths中加["src/styles"]（不能写./src/styles或src\styles） - 之后所有组件SCSS可直接写
@use 'variables';，无需路径
复用通用规则（如h2间距）？用@use导入_base.scss，别在组件里重复写
组件SCSS里直接写h2 { margin-bottom: 30px; }等于把逻辑又埋进去一遍，违背DRY。全局基础样式应集中管理，按需显式导入。
立即学习“前端免费学习笔记（深入）”；
-
_base.scss必须以_开头，否则会被单独编译成CSS，引发重复或冲突 - 组件中必须用
@use 'src/styles/base' as base;，不用旧式@import（后者可能导致duplicate mixin definition） -
@use提供命名空间隔离，比如混入base.h2()不会和别的h2()冲突
组件样式默认隔离，但标签选择器（如h2）仍生效——别误以为要穿透
Angular默认ViewEncapsulation.Emulated，会自动给h2这类标签选择器加上属性匹配（如h2[_ngcontent-ng-c123]），所以你在_base.scss里写的h2规则，只要被@use导入，就会作用于当前组件模板里的h2，不需要::ng-deep，也不该用@import相对路径去“强行引入”。
- 如果你启用了
ViewEncapsulation.ShadowDom，那全局样式确实不穿透——此时应改用CSS自定义属性（var(--header-color)）或显式绑定类名，而不是依赖::ng-deep - 最常被忽略的一点：
styles数组引入的是全局样式，它和组件样式不冲突，但容易误判“没生效”，先看浏览器Computed面板里哪条规则赢了
