在angular.json的styles数组中引入的css文件全局生效，注入，优先级高于组件样式，但不影响innerhtml渲染内容和shadow dom组件。
styles数组里加的CSS文件到底作用范围多大
在 angular.json 的 projects.<name>.architect.build.options.styles</name> 数组中添加的 CSS 文件，会被 Webpack（或 Vite）打包进主样式 bundle，最终注入到 中——这意味着它对整个应用生效，且**优先级高于组件内 styles 或 styleUrls 定义的样式**（除非用 ::ng-deep 或 !important 强行覆盖）。但它不自动作用于动态插入的 DOM（比如通过 innerHTML 渲染的内容），也不影响 Shadow DOM 封装的第三方 Web Component。
为什么改了 angular.json 的 styles 却没生效
常见原因不是配置错，而是开发服务器没重载或缓存干扰：
- 修改
angular.json后必须重启ng serve，热更新不会监听该文件 - 浏览器可能缓存了旧的
styles.css，强制刷新（Ctrl+Shift+R）或禁用缓存调试 - 路径写错：用的是相对路径，但基准是项目根目录（即
angular.json所在位置），不是src/目录。例如"src/styles.scss"正确，"styles.scss"会报错File not found - 如果用了 Sass/Less，确保已安装对应 loader（
@angular-devkit/build-angular默认支持，但自定义构建配置可能漏掉）
全局样式和组件样式冲突时谁赢
顺序决定权重：styles 数组中靠后的文件，其 CSS 规则会覆盖前面同选择器的规则（前提是 specificity 相同）。但要注意：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 组件
ViewEncapsulation.Emulated（默认）下，Angular 会给组件样式加属性选择器（如[_nghost-abc123]），天然隔离，所以全局样式通常能“穿透”进来影响子元素，但无法直接命中组件宿主元素（除非用:host或::ng-deep） - 如果组件启用了
ViewEncapsulation.ShadowDom，全局样式完全无效——Shadow DOM 天然隔离样式 - 避免依赖加载顺序来解决冲突；更可靠的做法是提升全局样式的 specificity（比如加
body前缀），或用 CSS 自定义属性统一控制主题色等可变部分
要不要把所有样式都塞进 styles 数组
不推荐。虽然方便，但会破坏样式作用域和可维护性：
- 第三方 UI 库（如 Angular Material）建议按需导入，而不是全量打进全局 styles——否则体积膨胀、tree-shaking 失效
- 布局类、工具类（如
.mt-2,.flex）适合放全局；业务组件专属样式（如.user-card__avatar）应留在组件内部 - 如果用 Tailwind，官方推荐方式是把
@tailwind指令写在src/styles.css中，再把这个文件加入styles数组——这是唯一需要全局引入的入口
真正难处理的是跨多个模块复用的原子样式或设计系统 token，这类才值得认真规划进全局层，其余尽量就近声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
