必须在angular.json的projects→[项目名]→architect→build→options→styles数组中引入第三方css，路径相对于angular.json所在目录，顺序决定层叠优先级，加错位置会导致构建后样式丢失。
能用 styleUrls 引入外部 CSS，但必须满足路径可解析、文件在构建上下文中、且不违反 Angular 的视图封装机制——否则样式压根不会应用到组件上。
styleUrls 路径必须相对于项目根目录（不是组件目录）
Angular 解析 styleUrls 时，所有路径都从 angular.json 所在位置（即项目根）开始算起。写成 ./bootstrap.css 或 app/components/my-comp.css 都会 404。
- ✅ 正确写法：
styleUrls: ['src/assets/css/bootstrap.min.css'] - ✅ 若 CSS 已声明在
angular.json的assets数组里（如"src/assets/css"），也可简写为styleUrls: ['css/bootstrap.min.css'] - ❌ 错误写法：
styleUrls: ['./bootstrap.min.css']（相对组件 TS 文件，无效） - ❌ 错误写法：
styleUrls: ['/assets/css/bootstrap.min.css']（带前导斜杠，被当绝对路径处理）
引入的 CSS 不生效？先确认 ViewEncapsulation 行为
Angular 默认启用 ViewEncapsulation.Emulated，它会给组件内元素加随机属性（如 _ngcontent-ng-c123），并重写 CSS 选择器匹配该属性。这意味着：外部 CSS 里的 .btn 无法命中组件内的 <button class="btn"></button>，除非你干预封装逻辑。
- 若 CSS 是静态类（如 Bootstrap 的
.container、.text-center），且你只在模板中显式写了这些 class，那它能工作——因为类名存在，且 Angular 不会删掉它 - 若 CSS 依赖后代选择器（如
div .btn）或全局作用域行为（如重置bodymargin），默认封装下大概率失效 - 临时解法：在组件装饰器里加
encapsulation: ViewEncapsulation.None，让样式全局生效；但这是“开闸放水”，需谨慎评估污染风险
node_modules 里的 CSS 怎么引入？别直接写路径
直接写 node_modules/bootstrap/dist/css/bootstrap.min.css 在 styleUrls 里会构建失败——Angular CLI 不允许 styleUrls 加载 node_modules 下的文件（安全限制）。
- ✅ 推荐做法：把第三方 CSS 提前复制进
src/assets/，再通过styleUrls引用（例如'src/assets/css/bootstrap.min.css'） - ✅ 更规范做法：在
angular.json的projects → [name] → architect → build → options → styles数组里声明，让它作为全局样式参与构建（路径写"node_modules/bootstrap/dist/css/bootstrap.min.css"） - ❌ 不要尝试
styleUrls: [require('bootstrap/dist/css/bootstrap.min.css')]—— 这是 Webpack 用法，Angular CLI 不支持require()在styleUrls中
为什么开发者工具里能看到 CSS，但元素没样式？
常见错觉：打开 DevTools 的 Elements 面板，看到 <style></style> 标签里有你的规则，但对应元素没变色——这往往不是加载失败，而是层叠优先级或选择器不匹配。
- 检查 Computed 面板，看目标属性（如
color）被哪条规则覆盖，注意[_ngcontent-xxx]属性是否让选择器失效 - 如果用了
ViewEncapsulation.None，但样式仍不生效，可能是全局 CSS 被后来加载的样式覆盖（比如styles.css写在angular.json的styles数组靠后位置） - 动态插入的 DOM（如 CKEditor 创建的编辑区）不在组件初始模板中，
styleUrls的样式不会自动作用其上——这类场景必须用ViewEncapsulation.None或手动注入<link>
真正麻烦的从来不是“怎么写”，而是“为什么写了却没效果”——路径、封装、层叠、动态 DOM，四个点漏一个，样式就静默失效。调试时优先看 DevTools 的 Computed 和 Styles 面板，而不是反复改 styleUrls 数组。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
