全局css必须配置在angular.json的projects→[项目名]→architect→build→options→styles数组中，路径须以项目根目录为基准且带src/前缀，顺序决定层叠优先级，改后需重启ng serve。
全局CSS必须进 angular.json 的 build.options.styles，组件内样式默认隔离，想跨组件复用就别硬写在组件里——直接建 _base.scss 按需导入。
全局样式只认 angular.json 里的 build.options.styles
Angular 构建系统只读 projects → [项目名] → architect → build → options → styles 这个数组。写在 serve 或 test 的 styles 里，ng serve 看得见，ng build --prod 后彻底消失。
- 路径必须以
angular.json所在目录为基准，且带src/前缀，比如"src/assets/css/normalize.css"✅；"assets/css/normalize.css"❌（404） - 顺序 = 加载顺序 = 层叠优先级：重置类（如
normalize.css）放最前，第三方框架（如@angular/material主题）居中，项目styles.css放最后 - 改完
angular.json必须重启ng serve，它不监听该文件变化
组件样式默认隔离，但标签选择器仍生效
Angular 默认用 ViewEncapsulation.Emulated，给组件元素加属性（如 _ngcontent-ng-c123），再把 CSS 选择器重写成带该属性的形式。所以你在组件 SCSS 里写 button { color: red; }，依然能生效——因为 Angular 把它编译成了 button[_ngcontent-ng-c123] { color: red; }。
- 这种机制不影响原生 HTML 标签选择器，但会拦截类名、ID 等未加宿主限定的选择器
- 若组件启用了
ViewEncapsulation.None或ShadowDom，行为完全不同：None完全不封装，ShadowDom则依赖浏览器原生支持，button这种无前缀选择器将失效 - 想确保样式只作用于当前组件，优先用 BEM 类名（如
.card__title）而非裸标签
跨组件复用样式：用 @use 导入 _base.scss
不要在 5 个组件的 .component.scss 里各写一遍 h2 { margin-bottom: 30px; }。建一个 src/styles/_base.scss（注意下划线前缀），集中定义原子规则：
:root {
--primary-color: #007bff;
}
h2 {
margin: 0 0 30px;
color: var(--primary-color);
}
button {
display: inline-flex;
padding: 8px 16px;
border-radius: 4px;
}
- 在组件 SCSS 中用
@use 'src/styles/base' as *;（Angular 14+ 推荐）或@import 'src/styles/base';（兼容旧版） - 确保
angular.json的stylePreprocessorOptions.includePaths包含src/styles，否则路径解析失败 - 避免在
_base.scss里用:host或::ng-deep——它们语义模糊，且在 Shadow DOM 下不可靠
:host 和 ::ng-deep 的真实用途与风险
:host 是唯一合法“选中自己”的方式，比如你想让组件根元素有背景色：:host { background: #f8f9fa; }。但它不能穿透到子组件内部——除非你显式用 :host ::ng-deep .child-class，而这是 Angular 官方标记为 deprecated 的写法。
-
::ng-deep不是标准 CSS，仅是 Angular 编译器识别的伪类，未来可能移除；它会强制样式泄漏，破坏封装边界 - 真正需要影响子组件样式时，优先考虑 CSS 自定义属性（如父组件设
--card-bg: #fff;，子组件用background: var(--card-bg);） - 若必须覆盖第三方组件（如
mat-button），应通过主题类 +:host-context(.theme-dark)控制，而不是暴力::ng-deep
最常被忽略的一点：组件样式是否生效，和它写在哪无关，而取决于三件事——angular.json 是否正确加载、ViewEncapsulation 模式是否匹配预期、以及选择器是否被 Angular 编译后仍能命中目标元素。调试时打开 DevTools 的 Computed 面板，看最终应用的是哪条规则，比猜“为什么没生效”快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
