styles数组应加在项目配置的"architect": {"build": {"options": {...}}}节点下，路径相对于angular.json所在目录，支持.css/.scss/.sass/.less，顺序影响优先级，全局样式需注意viewencapsulation和选择器特异性。
angular.json里的styles数组到底加在哪一级
加在项目配置的"build"节点下，不是根节点，也不是"test"或"serve"单独节点。Angular CLI 构建、开发服务器、测试都依赖build配置，改这里才真正全局生效。
常见错误是把样式路径塞进"serve"里，结果ng build后样式丢失——因为构建流程根本不读那个字段。
- 找到
angular.json中对应项目的配置，通常是"projects": { "your-app-name": { ... } } - 往
"architect": { "build": { "options": { ... } } }的options里加"styles"数组 - 如果已有
"styles"，直接追加路径；没有就新建，类型必须是字符串数组
styles数组里的路径是相对谁的
所有路径都是相对于angular.json所在目录（即工作区根目录）的相对路径，不是相对于src/，也不是相对于组件。
比如你的样式文件放在src/assets/styles/global.scss，那就要写"src/assets/styles/global.scss"，不能写"assets/styles/global.scss"（少src/会报错找不到文件）。
- 绝对路径不支持，别用
/src/...或~/... - 支持
.css、.scss、.sass、.less（需额外配置loader，但CLI默认只认前三种） - 顺序重要：数组靠前的样式优先级更高，会被靠后的同名规则覆盖
为什么加了styles但组件里还是没生效
最常见原因是启用了ViewEncapsulation.Emulated（Angular默认），它会把组件样式局部化，而styles数组引入的是全局样式——两者不冲突，但容易误判“没生效”。实际是全局样式已注入，只是被组件内联样式或更具体的CSS选择器盖住了。
- 用浏览器开发者工具检查
里是否有对应<style></style>或<link>标签 - 确认选择器是否足够具体，比如
button可能被app-header button覆盖，试试加!important临时验证（上线前删掉） - 如果用了
ViewEncapsulation.ShadowDom，全局样式默认不穿透，得手动用:host ::ng-deep（不推荐）或改用CSS自定义属性传递主题
要不要在styles里加node_modules里的CSS
可以，但路径要写全，比如"node_modules/bootstrap/dist/css/bootstrap.min.css"。不过要注意两点：
- 第三方库若带SCSS源码（如Bootstrap 5+），建议用
@import方式在主SCSS文件里引入，便于变量重写和tree-shaking - 直接引用编译后CSS会绕过Sass处理，无法修改$variables，且体积更大
- 某些库（如Angular Material）明确要求用
angular.json引入其预编译主题CSS，这时必须走styles数组
路径拼错、大小写不符、扩展名漏写（比如写成.scss但文件是.css）都会静默失败，控制台通常只报Module not found，得逐个核对文件是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
