必须加在projects→[项目名]→architect→build→options→styles数组中，路径相对于angular.json所在目录，顺序决定CSS层叠优先级，加错位置会导致ng build后样式彻底丢失。
必须加在 projects → [项目名] → architect → build → options → styles 数组里，其他位置都无效——改错地方会导致 ng build --prod 后样式彻底消失。
styles 数组该加在哪一级配置里
只认这一条路径：projects → [你的项目名] → architect → build → options → styles。这个数组被 ng build、ng serve、ng test 共同读取，改这里才真正全局生效。
- 写在
architect.serve.options.styles：本地ng serve看得见，但ng build --prod后样式全空 - 写在
projects根下或cli/version层：JSON 解析直接忽略，无报错但无效 - 写在某个
configurations（如production）内部：除非你明确要按环境差异化引入，否则样式只在对应环境生效
路径怎么写才不 404
所有路径都相对于 angular.json 所在目录（即项目根目录），不是 src/，也不是组件目录。
- 正确示例：
"node_modules/bootstrap-icons/font/bootstrap-icons.css"、"src/assets/styles/reset.scss" - 错误示例：
"assets/styles/reset.scss"（缺src/，构建时报File not found） -
"~/styles/reset.css"（不支持 TypeScript 别名） -
"/src/styles.css"（绝对路径不识别） -
"node_modules\bootstrap\dist\css\bootstrap.min.css"（Windows 下也必须用/，不能用\）
顺序为什么影响最终效果
styles 数组的顺序 = CSS 层叠优先级顺序。靠前的规则会被靠后的同名规则覆盖，和 HTML 中 <link> 加载顺序完全一致。
立即学习“前端免费学习笔记（深入）”；
- 推荐顺序：重置类（如
minireset.css）→ 框架类（如bootstrap.css或@angular/material主题）→ 项目自定义styles.css - 如果发现按钮颜色没变，先打开浏览器开发者工具的
Computed面板，看是哪条规则赢了；大概率是自定义样式写在了框架样式前面，被后者覆盖
加了但组件里还是没生效？检查这几点
Angular 默认启用 ViewEncapsulation.Emulated，它会把组件样式局部化，而 styles 数组引入的是全局样式——两者不冲突，但容易误判“没生效”。
- 修改
angular.json后必须重启ng serve，热更新不会监听该文件 - 浏览器可能缓存旧的
styles.css，强制刷新（Ctrl+Shift+R）或禁用缓存调试 - 检查
<head>是否已注入对应<style>或<link>标签 - 如果用了
ViewEncapsulation.ShadowDom，全局样式默认不穿透，此时需显式绑定类名或通过Renderer2动态添加
最常被忽略的一点：第三方库（比如 cnpm 安装的 bootstrap）实际文件可能藏在带下划线和 @ 版本号的路径里，例如 node_modules/_bootstrap@5.3.3@bootstrap/dist/css/bootstrap.min.css —— 直接写 bootstrap/dist/... 可能根本找不到文件。
