全局CSS必须配置在angular.json的projects→[项目名]→architect→build→options→styles数组中，路径须相对于项目根目录且推荐带src/前缀，修改后需重启ng serve；局部样式只能通过组件decorator的styleUrls或styles声明，@import或<link>无效。
全局 CSS 必须走 angular.json 的 styles 数组，局部样式必须写在组件的 styleUrls 或 styles 里——没有其他路径能真正生效。
全局 CSS 只能配在 angular.json 的 build.options.styles
这是唯一被 ng build、ng serve、ng test 共同识别的位置。塞到 serve.options.styles 或 test.options.styles 里，本地看着正常，构建后就全空；写在 configurations.production.styles 里，只在加 --configuration=production 时才加载。
路径必须相对于项目根目录（即 angular.json 所在位置），且推荐带 src/ 前缀：
-
"src/styles.scss"✅ 明确、稳定、语义清晰 -
"node_modules/bootstrap/dist/css/bootstrap.min.css"✅ 第三方 CSS 直接引用 -
"src/assets/css/reset.css"✅ 合理存放位置 -
"styles.css"❌ CLI 找不到（除非真放在项目根） -
"./src/styles.css"❌ 不解析点号开头的相对路径 -
"~/styles.css"❌ 不支持 TypeScript 别名
改完 angular.json 后必须手动重启 ng serve——它不监听该文件变化。
立即学习“前端免费学习笔记（深入）”；
局部样式不能靠 @import 或 <link> 注入
在组件 TS 文件里写 @import './my.css'，或在模板里写 <link rel="stylesheet" href="my.css">，构建时完全不处理，也不会注入 <head>。这些写法只对开发服务器的静态资源服务“碰巧有效”，上线即失效。
正确做法只有两种：
- 在组件装饰器中用
styleUrls: ['./my.component.scss']（推荐，支持 SCSS/Less） - 或直接内联：
styles: ['h2 { color: red; }']（仅适合极简场景）
注意：即使启用了 ViewEncapsulation.None，外部 @import 的 CSS 依然不会自动作用于该组件——因为 Angular 构建流程根本没把它纳入编译上下文。
SCSS 变量如何跨组件复用？靠 stylePreprocessorOptions.includePaths
想让所有组件的 SCSS 文件都能直接写 @use 'variables' as *; 而不用写冗长路径，必须配置 angular.json 中的 stylePreprocessorOptions.includePaths：
"stylePreprocessorOptions": {
"includePaths": ["src/styles"]
}
然后把变量文件命名为 _variables.scss（下划线前缀是必须的），放在 src/styles/ 下。这样任意组件 SCSS 里写 @use 'variables' as *; 就能拿到 $primary-color 等变量。
常见错误：
- 写成
@import './styles/variables'—— 绕过includePaths，路径一变就断 -
includePaths写成["./src/styles"]或["src\styles"]—— CLI 只认正斜杠、不认点号和反斜杠 - 变量文件叫
variables.scss（没下划线）——会被当成普通样式文件单独编译，可能报错或引入两次
全局和局部样式冲突时，谁控制最终效果？
顺序决定层叠优先级：angular.json 的 styles 数组越靠后，CSS 规则优先级越高。但实际生效还取决于封装模式：
- 默认
ViewEncapsulation.Emulated下，全局样式能影响组件子元素（如h2、button），但无法直接命中组件宿主元素，除非用:host - 若组件设了
encapsulation: ViewEncapsulation.ShadowDom，全局样式完全不穿透 - 不要靠加载顺序“赌”覆盖结果；更稳妥的是提升 specificity（比如加
body .my-button），或统一用 CSS 自定义属性（var(--primary-color)）驱动颜色、间距等可变部分
真正容易被忽略的是：全局样式不会作用于 innerHTML 渲染的内容，也不会影响 Shadow DOM 封装的第三方 Web Component——这两类场景得另寻方案。
