全局SCSS必须在angular.json的projects→[项目名]→architect→build→options→styles数组中配置，路径相对于项目根目录，顺序决定层叠优先级，错配位置或路径格式错误将导致构建后样式丢失。
全局 SCSS 必须走 angular.json 的 styles 数组
直接在 angular.json 的 projects.<name>.architect.build.options.styles 里加路径，才是唯一生效的全局样式入口。加错位置（比如塞进 serve.options.styles）会导致 ng build 后样式彻底消失，但 ng serve 看得见——这是最常被忽略的构建不一致问题。
路径必须相对于项目根目录（即 angular.json 所在位置），不能带 ./ 或 src/ 前缀以外的别名：
-
"src/styles.scss"✅ 推荐，语义清晰 -
"node_modules/bootstrap-icons/font/bootstrap-icons.css"✅ 第三方 CSS 直引 -
"assets/css/reset.css"❌ 缺src/，构建报File not found -
"~/styles.scss"❌ 不支持 TypeScript 别名 -
"srcstyles.scss"❌ Windows 反斜杠无效，必须用正斜杠
顺序决定层叠优先级：重置类 → 框架类（如 Angular Material 主题）→ 项目自定义样式。按钮颜色没变？先看浏览器 Computed 面板里哪条规则赢了，大概率是自定义样式写在了框架前面。
组件级 SCSS 只能通过 @Component 的 styleUrls 声明
Angular 构建时只认 @Component({ styleUrls: ['./my-comp.component.scss'] }) 这种写法。其他任何方式都无效：
立即学习“前端免费学习笔记（深入）”；
- 在组件 TS 文件里写
import './theme.scss'❌ 不触发编译，无样式加载 - 在组件 HTML 模板里写
<link rel="stylesheet">❌ 构建时忽略，运行时也不生效 - 把路径塞进
angular.json的styles数组 ❌ 那是全局样式，不是组件级
路径是相对于该 TS 文件所在目录的，支持跨目录，比如 ['../shared/scss/button.scss']。注意：如果启用了 ViewEncapsulation.ShadowDom，styleUrls 加载的外部文件不会穿透 Shadow DOM 边界；而 styles: [`h1 { color: red; }`] 这种内联写法仍会生效。
复用变量和混入必须配 stylePreprocessorOptions.includePaths
想让所有组件 SCSS 都能直接写 @use 'variables' 而不用写一长串相对路径，必须在 angular.json 的 build.options 下加：
"stylePreprocessorOptions": {
"includePaths": ["src/styles"]
}
同时确保变量文件命名为 _variables.scss（下划线前缀），否则会被当作普通样式单独编译，引发重复或冲突。常见错误：
-
includePaths: ["./src/styles"]或["src\styles"]❌ 只接受无前缀、正斜杠的路径 - 组件 SCSS 里写
@import '../styles/_variables.scss'❌ 路径硬编码，移动组件就断，还可能触发variable is undefined - 在
styles.scss里也写@use 'variables'❌ 不需要，它本身就在src/styles/下，直接被 includePaths 覆盖
跨组件复用样式规则只能靠 @use 导入基础 partial
不要在每个组件 SCSS 里重复写 h2 { margin-bottom: 30px; }。正确做法是抽成 src/styles/_base.scss，然后在组件中显式导入：
@use 'src/styles/base' as base;
这样既能复用，又保留命名空间隔离（避免混入冲突）。关键约束：
- 文件名必须以下划线开头（
_base.scss），否则会被单独编译成 CSS - 必须用
@use，不是@import：后者在 Angular 14+ 中已不推荐，容易导致duplicate mixin definition - 组件 SCSS 里禁止写
@import '../styles/base'：路径依赖强，破坏缓存，且无法享受 includePaths 带来的路径简化 - 如果未来启用
ViewEncapsulation.ShadowDom，标签选择器（如h2）将不再自动生效，需提前改用:host h2或 CSS 自定义属性
真正容易被忽略的是：组件样式是否生效，和 ViewEncapsulation 模式强绑定。一旦改成 None，styleUrls 加载的样式就变成全局污染源——它不再带 [_ngcontent-xxx] 属性选择器，调试时很难追溯来源。
