必须通过angular.json的styles数组配置，因仅该路径被构建流程识别并注入；路径须相对项目根目录、改后需重启ng serve、浏览器缓存需强制刷新，三者任一出错均导致样式不生效。
必须通过 angular.json 的 styles 数组配置，路径写错、不重启服务、缓存干扰，三者任一都会导致样式“看似引入了却没生效”。
为什么只能写在 angular.json 的 styles 数组里
Angular CLI 构建流程中，只有 angular.json 里 projects.<name>.architect.build.options.styles</name> 列出的文件才会被 Webpack/Vite 打包进 styles.css 并注入到 。直接在 src/styles.scss 里用 @import 引入第三方 CSS（比如 @import 'bootstrap/dist/css/bootstrap.min.css';）只对当前文件局部有效，且无法影响 index.html 根节点或第三方 Web Component。
更关键的是：<link> 标签写在 index.html 中、或在组件里动态插入，都不受 Angular 构建控制——这些路径不会被解析、不会走预处理器、也不会参与 PurgeCSS 清理（如果你用了 Tailwind）。
styles 数组里的路径怎么写才不报错
路径基准是项目根目录（即 angular.json 所在位置），不是 src/，也不是当前 shell 工作目录：
-
"src/styles.scss"→ ✅ 推荐，语义清晰，CLI 默认从src/开始解析 -
"node_modules/bootstrap-icons/font/bootstrap-icons.css"→ ✅ 正确，不加./或src/ -
"./node_modules/bootstrap/dist/css/bootstrap.min.css"→ ❌ 报错Can't resolve './node_modules/...'，CLI 不处理.开头的相对路径 -
"bootstrap/dist/css/bootstrap.min.css"→ ❌ 报错File not found，除非你真把bootstrap文件夹放项目根目录（不现实） - 如果用了 cnpm 安装，实际路径可能是
"node_modules/_bootstrap@5.3.3@bootstrap/dist/css/bootstrap.min.css"→ ✅ 必须用带下划线和@的真实路径，快捷方式无效
改完 angular.json 没生效？先做这三件事
90% 的“不生效”问题卡在这几步：
- 重启
ng serve—— 它完全不监听angular.json变化，改完不关不重开，浏览器永远加载旧 bundle - 强制刷新页面（
Ctrl+Shift+R）或开发者工具里勾选Disable cache—— 浏览器缓存了旧的styles.css - 打开开发者工具 → Elements → 选中一个元素 → Computed 面板，看
color、font-family等属性最终由哪条 CSS 规则决定 —— 如果 Bootstrap 的.btn-primary被覆盖，大概率是你自己的src/styles.scss写在了它前面，顺序反了
多个第三方 CSS 加载顺序影响优先级
styles 数组是顺序敏感的：靠后的文件，同选择器下会覆盖靠前的规则（前提是 specificity 相同）。例如：
["src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css"]
意味着你的 styles.scss 会先加载，Bootstrap 后加载，所以它的 .btn 类能覆盖你写的同名类；但如果你调换顺序，Bootstrap 就可能被你自己的重置规则干掉。
真正容易被忽略的是：字体文件（如 bootstrap-icons.woff2）的路径是否相对于 CSS 文件本身。比如你在 bootstrap-icons.css 里看到 url("./font/bootstrap-icons.woff2")，那它期望该字体文件在 node_modules/bootstrap-icons/font/ 下 —— 如果你删了 font/ 目录或改了结构，图标就挂了，且控制台通常只报 404，不提示样式失效原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
