全局css必须通过angular.json的architect.build.options.styles数组引入，路径相对于项目根目录（如"src/styles.scss"），顺序决定层叠优先级；组件默认启用viewencapsulation.emulated实现样式隔离，二者共存但不冲突。
全局CSS必须走 angular.json 的 styles 数组，组件样式默认受 ViewEncapsulation.Emulated 隔离——这两者不冲突，但混用时容易误判“样式没生效”。
全局样式只能配在 angular.json 的 build.options.styles 里
Angular 构建流程只认 architect.build.options.styles 这个数组，其他位置（比如 serve 或 test 节点）加的路径，ng build 后直接消失。
- 路径必须相对于
angular.json所在目录，例如"src/styles.scss"或"src/assets/css/normalize.css"，不能写成"assets/css/normalize.css"（缺src/） - 顺序决定 CSS 优先级：靠前的文件规则会被靠后的同名规则覆盖；重置类（如
normalize.css）应放最前 - 支持
.css、.scss、.sass，但.less需额外配置 loader，不推荐在新项目中引入 - 浏览器检查
中是否注入了对应<style></style>标签，是验证是否生效的最快方式
组件样式默认被 ViewEncapsulation.Emulated 封装
即使你写了全局 h2 { color: blue; }，组件内 <h2></h2> 仍会生效——因为 Angular 的模拟封装只给组件样式加属性选择器，不限制标签选择器匹配。
- 但若组件自己定义了
h2 { color: red; }，它会因选择器更具体而覆盖全局规则 - 想让组件样式穿透封装（比如覆盖第三方库），可用
:host ::ng-deep h2，但已被标记为 deprecated，仅作临时修复 - 真正安全的穿透方式是用 CSS 自定义属性：全局定义
:root { --h2-color: blue; }，组件内写h2 { color: var(--h2-color); } - 启用
ViewEncapsulation.ShadowDom后，全局样式默认不生效，必须显式用:host或自定义属性传递
复用 SCSS 基础样式要用 @use + partial 文件
把通用规则（如按钮排版、标题间距）抽到 src/styles/_base.scss，再用 @use 导入，比堆在 src/styles.scss 里更可控。
- 文件名必须以下划线开头（
_base.scss），否则会被 CLI 当作独立样式文件编译，导致重复打包 - 组件 SCSS 中写
@use '../styles/base' as base;，就能用base.$primary-color或base.button（如果导出 mixin） -
@use不会让_base.scss里的普通 CSS 规则自动生效——那些规则只在通过angular.json全局引入时才起作用 - 避免用
@import：它已 deprecated，且无命名空间，易引发变量/mixin 冲突
最容易被忽略的是：全局样式和组件样式不是“谁覆盖谁”的关系，而是“共存+优先级竞争”。查不到效果时，先看 有没有注入，再看浏览器开发者工具里最终计算出的 color 值被哪条规则决定——很多时候问题不在配置，而在选择器特异性或 CSS 变量未正确继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
