styles数组必须加在projects→[项目名]→architect→build→options→styles中，加错位置会导致ng build后样式丢失；路径须相对于angular.json所在目录且带src/前缀，顺序决定CSS层叠优先级。
angular.json 的 styles 数组必须加在 build.options 里
加错位置是 80% 样式不生效的根源。它必须放在 projects.<your-app-name>.architect.build.options.styles 下，不是 serve、test 或项目根级。CLI 构建流程只读这个路径——改 serve.options.styles 只影响本地开发服务器，ng build 后样式全丢。
常见错误写法：
-
"serve": { "options": { "styles": ["..."] } }→ 本地看着有，构建后消失 -
"projects": { "my-app": { "styles": [...] } }→ JSON 无效字段，完全被忽略 -
"configurations": { "production": { "styles": [...] } }→ 仅 production 环境生效，dev 下没样式
正确结构节选：
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
}
}
}
}
}
路径必须相对于 angular.json 所在目录，且带 src/
所有路径都以 angular.json 文件所在位置为基准，不能省略 src/ 前缀。CLI 默认从 src/ 开始解析，但配置项本身要求显式写出。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
"src/styles.scss"、"src/assets/css/reset.css"、"node_modules/@angular/material/prebuilt-themes/indigo-pink.css" - ❌ 报错：
"styles.scss"（找不到文件）、"./src/styles.scss"（Webpack 不识别.开头）、"~/styles.scss"（不支持 TypeScript 别名） - ❌ Windows 路径陷阱：
"node_modules\bootstrap\css\bootstrap.css"→ 必须用正斜杠/，否则构建失败
第三方 CSS 直接引用编译后文件没问题，但若要用 Sass 变量重写（比如 Bootstrap 的 $theme-colors），得改用 @import 方式引入源码，而不是往 styles 数组里塞 .css。
顺序 = 层叠优先级，reset.css 必须排最前
styles 数组的顺序就是最终 CSS 在 <head> 中的加载顺序，直接决定规则覆盖关系。靠前的样式会被靠后的同名规则覆盖。
- 推荐顺序：
"src/assets/css/reset.css"→"src/styles.scss"→"node_modules/bootstrap/dist/css/bootstrap.min.css" - 如果按钮颜色没变，大概率是 Bootstrap 的
button { background: #007bff; }写在了你自定义样式后面，把它盖掉了 - 调试时打开浏览器开发者工具的
Computed面板，看哪条规则生效、被哪条覆盖，比猜快得多
注意：修改 angular.json 后，ng serve 不会自动监听该文件变化，必须手动重启服务，否则新路径根本不会加载。
全局样式“没生效”？先确认是不是被组件封装机制误判了
Angular 默认启用 ViewEncapsulation.Emulated，它把组件样式局部化，但不影响全局样式注入——styles 数组里的 CSS 确实已注入 <head>，只是可能被更具体的组件内样式压住。
- 检查
<head>里有没有对应<style>或<link>标签，确认是否真的加载了 - 组件里写
.btn { color: red; }，全局写了button { color: blue; }，前者赢——因为类选择器比元素选择器优先级高 - 临时加
!important验证是否生效（上线前务必删掉） - 若用了
ViewEncapsulation.ShadowDom，全局样式默认不穿透，得用:host ::ng-deep（不推荐）或改用 CSS 自定义属性传递主题值
真正容易被忽略的是：每个 styles 数组条目都参与打包和注入，哪怕只是一个空文件，也会触发额外的构建步骤；路径写错一个字符，构建时报错但不中断，只是静默跳过——所以一定要看终端输出的 “File not found” 提示。
