angular.json的styles数组是唯一可靠方式，必须加在projects→[项目名]→architect→build→options→styles中，路径相对于项目根目录，顺序决定层叠优先级，加错位置或路径错误会导致构建后样式丢失。
angular.json 的 styles 数组是唯一可靠方式，其他路径或写法在构建后大概率失效。
必须加在 projects → [项目名] → architect → build → options → styles
这个位置被 ng build、ng serve、ng test 共同读取。加错地方——比如塞进 serve.options.styles 或 test.options.styles——会导致本地看着正常，但 ng build --prod 后样式全空，且无任何报错。
常见错误配置：
-
"serve": { "options": { "styles": ["src/styles.css"] } }→ 仅开发服务器识别，构建时忽略 -
"styles": [...]直接写在projects根下 → JSON 解析跳过，静默失效 -
"configurations": { "production": { "styles": [...] } }→ 只在--configuration=production时生效
styles 数组里的路径必须相对于 angular.json 所在目录
不是相对于 src/，也不是相对于组件文件，而是项目根目录（即 angular.json 所在位置）。
立即学习“前端免费学习笔记（深入）”；
正确写法：
-
"src/styles.css"✅（推荐，语义清晰） -
"node_modules/bootstrap/dist/css/bootstrap.min.css"✅（第三方 CSS 可直接引用） -
"src/assets/styles/reset.scss"✅
错误写法：
-
"styles.css"❌（找不到文件，除非真放在项目根） -
"./src/styles.css"❌（CLI 不解析.开头的相对路径） -
"~/styles.css"❌（不支持 TypeScript 别名） -
"\src\styles.css"❌（Windows 下也必须用/，不能用反斜杠）
改了 angular.json 但样式没更新？
Angular CLI 不监听 angular.json 变化，热更新不会触发重载。
- 必须手动重启
ng serve - 浏览器可能缓存旧的
styles.css，强制刷新（Ctrl+Shift+R）或禁用缓存调试 - 检查
是否已注入对应<style>或<link>标签 - 如果用了 Tailwind，确认
tailwind.config.js的content字段包含src/**/*.html和src/**/*.ts，否则 PurgeCSS 可能误删类名
全局样式和组件样式冲突时谁赢？
顺序决定层叠优先级：styles 数组靠后的文件，其规则会覆盖前面同选择器的规则（特异性相同时）。
但要注意：
- 组件默认启用
ViewEncapsulation.Emulated，它会给组件内元素加属性选择器（如[_ngcontent-ng-c123]），天然隔离组件样式；全局样式能影响子元素，但无法直接命中组件宿主元素，除非用:host - 若组件启用了
ViewEncapsulation.ShadowDom，全局样式完全不穿透 - 避免靠加载顺序“碰运气”解决冲突；更稳妥的是提升全局样式的特异性（例如加
body前缀），或统一用 CSS 自定义属性（var(--primary-color)）控制可变部分
真正容易被忽略的是：styles 数组里每个条目都参与构建打包，哪怕只是个空文件，也会生成对应输出；顺序一旦写错，覆盖逻辑就不可控，且问题往往延迟到上线后才暴露。
