必须将css路径添加到angular.json的projects..architect.build.options.styles数组中，该数组是angular cli构建流程唯一认的入口，路径须相对于项目根目录且为字符串格式，顺序决定css层叠优先级。
必须把CSS路径加到 angular.json 的 projects.<name>.architect.build.options.styles</name> 数组里
其他任何位置都不可靠：塞进 serve 配置里，ng serve 看得见但 ng build --prod 后样式全空；写在 test 或根级 JSON 里，CLI 直接忽略不报错；放在某个 configurations（如 production）内部，则只在对应环境生效。
这个数组是 Angular CLI 构建流程唯一认的入口——Webpack/Vite 会把它打包进 styles.css，并在应用启动前注入 ，确保 CSS 变量、重置规则、字体声明等对整个应用生效。
-
styles数组必须是字符串数组，不能是对象或嵌套结构 - 已有该字段就直接追加路径；没有就新建，位置严格在
build → options下 - 修改后必须重启
ng serve，热更新不会监听angular.json
styles 数组里的路径必须相对于项目根目录，且要带 src/
路径基准是 angular.json 所在位置（即项目根目录），不是 src/，也不是组件目录。常见错误包括：
- 写成
"styles.scss"→ 报错Can't resolve 'styles.scss'（文件实际在src/下） - 写成
"./src/styles.scss"→ 报错Module not found（CLI 不解析.） - 写成
"assets/styles/reset.css"→ 404，因为缺src/前缀 - 写成
"node_modules\bootstrap\css\bootstrap.min.css"→ Windows 下也必须用/，不能用\
正确写法只有两种风格："src/styles.scss"（推荐，语义清晰）或 "src/assets/vendor/bootstrap.css"。
顺序决定 CSS 层叠优先级，别指望组件样式自动“让位”
styles 数组的顺序 = 浏览器加载 <link> 的顺序 = CSS 规则覆盖顺序。靠后的文件能覆盖前面同选择器、同 specificity 的规则。
- 推荐顺序：
"src/assets/css/minireset.css"→"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"→"src/styles.scss" - 如果自定义按钮颜色没变，大概率是你的
.btn写在了框架样式前面，被后者覆盖了 - 组件默认启用
ViewEncapsulation.Emulated，它会给组件样式加属性选择器（如[_ngcontent-xxx]），所以全局样式通常能影响子元素，但无法命中组件宿主元素，除非用:host或提升选择器 specificity - 避免依赖顺序解决冲突；更可靠的是在全局文件中用
body .my-btn提升权重，或统一用 CSS 自定义属性（var(--primary-color)）控制可变部分
第三方 CSS 库别盲目全量引入，注意体积和可维护性
直接往 styles 数组里加 node_modules/bootstrap/dist/css/bootstrap.min.css 是可行的，但有明显代价：
- 绕过 Sass 处理，无法修改
$variables（比如改主题色、断点） - 全量引入导致 bundle 体积膨胀，tree-shaking 失效
- 与 Tailwind 等工具类库共存时，PurgeCSS 可能误删未显式使用的类名（需确认
tailwind.config.js的content字段包含src/**/*.html和src/**/*.ts） - 真正难处理的是 Shadow DOM 组件（如某些 Web Component）——全局样式默认不穿透，
::ng-deep已废弃，应改用 CSS 自定义属性传递主题
真正容易被忽略的是：styles 数组里的每个条目都参与构建，哪怕只是个空文件，也会触发重新打包；而一旦用了预处理器（如 Sass），路径别名（如 ~@angular/material）是否生效，取决于 sassOptions.includePaths 是否配置正确——Angular 15+ 默认支持，但自定义构建配置可能漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
