必须加在projects → [项目名] → architect → build → options → styles数组中，加错位置会导致ng build后样式彻底丢失；路径须相对于angular.json所在目录（项目根目录），顺序决定css层叠优先级。
angular.json 的 styles 数组必须加在 projects → [项目名] → architect → build → options 下
加错位置，ng build 后样式就彻底消失——不是“偶尔不生效”，是构建产物里根本没打包进去。
- 写在
architect.serve.options.styles：本地ng serve看得见，但ng build --prod输出的styles.css里没有它 - 写在
projects根级或cli节点下：JSON 解析直接跳过，不报错、不警告、不生效 - 写在某个
configurations（比如production）内部：只在对应环境生效，开发时有、生产时无，或反过来
真正起作用的路径只有一条：projects → your-app-name → architect → build → options → styles。这个数组被 ng build、ng serve、ng test 共同读取，改这里才全局生效。
styles 数组里的路径必须相对于 angular.json 所在目录（项目根目录）
不是相对于 src/，也不是相对于组件，更不支持别名（如 ~/）或 Windows 反斜杠。
- ✅ 正确：
"src/assets/styles/reset.css"、"node_modules/bootstrap-icons/font/bootstrap-icons.css" - ❌ 错误：
"assets/styles/reset.css"（缺src/，构建时报File not found） - ❌ 错误：
"~/styles/main.scss"（TypeScript 别名不被 CLI 解析） - ❌ 错误：
"\node_modules\bootstrap\css\bootstrap.min.css"（必须用/，哪怕在 Windows）
尤其注意 node_modules 中某些包（比如用 cnpm 或 pnpm 安装的）实际文件夹名带下划线和版本号，例如 _bootstrap@5.3.3@bootstrap。直接写 node_modules/bootstrap/... 可能 404，得去 node_modules 里手动确认真实路径。
顺序决定 CSS 层叠优先级，不是“引入了就行”
styles 数组的顺序 = 浏览器加载 <link> 的顺序 = CSS 规则覆盖顺序。靠后的文件能覆盖前面同选择器、同 specificity 的规则。
- 推荐顺序：
"src/assets/css/minireset.css"→"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"→"src/styles.scss" - 如果自定义按钮颜色没变，大概率是你的
.btn写在了 Bootstrap 样式前面，被后者覆盖了 - 不要依赖
!important拖延问题；先调顺序，再提选择器权重（比如用body .my-btn）
浏览器开发者工具的 Computed 面板里点开属性，看哪条规则“赢了”，比猜快得多。
加了但组件里还是没生效？先查这三件事
Angular 默认启用 ViewEncapsulation.Emulated，它把组件样式局部化，而 styles 数组引入的是全局样式——两者不冲突，但容易误判“没生效”。
- 修改
angular.json后必须重启ng serve，热更新不会监听该文件 - 浏览器可能缓存旧的
styles.css，强制刷新（Ctrl+Shift+R）或禁用缓存调试 - 检查
里是否真有对应<style></style>或<link>标签；没有，说明路径或位置错了
全局样式无法命中组件宿主元素（比如 <app-header></app-header>），除非用 :host 或提升选择器 specificity。这点最容易被忽略——你写的 header { color: red } 是生效的，但 app-header { color: red } 不会匹配到宿主，因为 Angular 给它加了属性选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
