全局样式必须通过angular.json的styles数组引入，路径须相对于项目根目录（如"src/styles.scss"），顺序决定CSS优先级，且仅此方式能确保构建时打包并注入<head>；组件内@import或<link>无效。
全局样式必须走 angular.json 的 styles 数组
直接在组件里 @import 或写 <link> 标签，样式不会进 <head>，构建后就失效。唯一可靠路径是改 angular.json 里的 projects.<your-app>.architect.build.options.styles —— 这个数组决定哪些文件会被 Webpack 打包、注入，并对整个应用生效。
常见错误：
- 把路径加到
"serve"节点下：本地ng serve看似正常，ng build后样式全丢 - 路径写成相对
src/：比如填"assets/styles/global.scss"，实际要写"src/assets/styles/global.scss"（所有路径都相对于angular.json所在目录） - 顺序搞反：多个全局样式文件时，靠后的会覆盖靠前的同名规则；重置样式（如
normalize.css）应放最前
@use 和 @import 在组件 SCSS 中的区别
如果你的全局样式是 SCSS（比如 _base.scss），它只是“基础规则集”，不是自动注入的 CSS。组件想用里面定义的变量、混合宏或基础选择器，得显式引入。
推荐用 @use（Angular 13+ 默认支持）：
立即学习“前端免费学习笔记（深入）”；
-
@use '../styles/base' as base;：引入后可通过base.$primary-color或base.button（若导出 mixin）调用 - 避免命名冲突：
as base显式指定命名空间，比@import更安全 -
@import已被 Sass 官方标记为 deprecated，且不支持模块化作用域
注意：@use 不会让 _base.scss 里的普通 CSS 规则（如 h2 { margin-bottom: 30px; }）自动生效——那些规则只在被 @use 并 @include，或通过 angular.json 全局引入时才起作用。
SCSS partial 文件命名和位置
像 _base.scss、_variables.scss 这类文件，必须以下划线开头（_），这是 SCSS 的约定：表示它是 partial，不会被单独编译成 CSS。它们只供 @use 或 @import 消费。
- 存放位置建议统一在
src/styles/下，比如src/styles/_variables.scss、src/styles/_base.scss - 不要放在
src/app/下：容易被 Angular CLI 误认为是组件样式，也可能因路径过深导致@use引入时路径冗长 - 变量和 mixin 应优先提取到 partial，而不是堆在
src/styles.scss里——后者适合做“汇总入口”，比如：
@use './variables' as vars;
@use './base';
// 这里可做少量全局覆盖，但主体逻辑应在 partial 中
body {
font-family: vars.$font-family-base;
}
ViewEncapsulation 对全局样式的实际影响
即使你把 src/styles.scss 加进了 angular.json，某些组件里还是看不到效果，大概率是 ViewEncapsulation.Emulated（Angular 默认）在起作用：它会给组件 DOM 打上属性标签（如 _ngcontent-ng-c123），让组件内样式只作用于自己，但不影响全局样式本身。
真正的问题通常是：
- 选择器特异性不够：全局写的
button被组件里更具体的.card-button button盖掉了 - 组件启用了
ViewEncapsulation.None却没意识到它会把组件样式“泼”到全局，反而干扰了你的基础规则 - 用了
ViewEncapsulation.ShadowDom：全局样式默认不穿透，此时只能靠 CSS 自定义属性（--my-color）传值，或改用:host ::ng-deep（不推荐，已弃用）
验证方法：打开浏览器开发者工具，看 <head> 里有没有对应 <style> 标签；再检查目标元素是否被更高优先级的选择器命中。
真正容易被忽略的是：全局样式和组件样式不是“谁覆盖谁”的关系，而是“谁更具体、谁在后、谁带 !important”——angular.json 只管注入，不管打架结果。
