全局样式文件必须通过angular.json的styles数组引入，因其是唯一被CLI构建流程识别并注入的方式；路径须相对于项目根目录（如"src/styles.scss"），顺序决定CSS优先级，且支持.css/.scss/.sass/.less。
全局样式文件必须通过 angular.json 的 styles 数组引入，直接在组件里 @import 或写 <link> 标签无效——Angular 构建时不会处理这些路径，也不会注入到 DOM 的 中。
为什么 angular.json 的 styles 是唯一可靠方式
Angular CLI 构建流程中，只有 angular.json 里 projects.<name>.architect.build.options.styles</name> 列出的样式文件才会：
- 被 Webpack（或 Vite）统一打包进
styles.css或单独提取为styles.bundle.css - 在应用启动前注入到
，确保所有组件都能继承其 CSS 变量、重置规则、字体声明等 - 支持 Sass/Less/PostCSS 等预处理器（只要扩展名匹配且已配置 loader）
把 styles.scss 放进 src/app/ 下再用 @import 引入？它只对当前组件生效（如果用了 ViewEncapsulation.None），且无法影响 index.html 中的根节点或第三方库组件。
styles 数组里路径怎么写才不报错
路径必须相对于项目根目录（即 angular.json 所在位置），且不能带 src/ 前缀——CLI 默认从 src/ 开始解析。常见错误包括：
- 写成
"src/styles.scss"→ ✅ 正确（推荐，明确语义） - 写成
"./src/styles.scss"→ ❌ 报错：找不到模块（CLI 不解析.） - 写成
"styles.scss"→ ❌ 报错：找不到，除非你把文件放在项目根目录（不推荐） - 写成
"src/app/styles.scss"→ ✅ 可用，但违背“全局样式应放src/根下”的约定，后续迁移或 SSR 时易出问题
多个文件按加载顺序排列，靠前的样式优先级更高（例如先放 reset.css，再放 variables.scss，最后是 main.scss）。
遇到 “Can’t resolve ‘xxx’” 或样式不生效的排查点
这类问题 90% 出在构建上下文或路径别名上：
- 如果你在
styles.scss里用了@use '~@angular/material' as mat，确认node_modules路径是否被sassOptions.includePaths包含（Angular 15+ 默认已支持~别名） - 使用了
font-face且字体文件放在src/assets/fonts/？确保路径是相对styles.scss的位置，比如url('../assets/fonts/inter.woff2') - 修改了
angular.json后样式没更新？重启ng serve—— 它不会监听该文件变化 - 用了 Tailwind？确认
tailwind.config.js的content字段已包含src/**/*.html和src/**/*.ts，否则 PurgeCSS 可能误删类名
真正容易被忽略的是：styles 数组里的每个条目都参与构建图谱，哪怕只是空文件，也会触发一次样式编译；如果有条件加载逻辑（比如暗色模式切换），不要试图在 angular.json 里做动态配置——那属于运行时行为，得用 CSS 自定义属性 + document.documentElement.classList 控制。
