全局 scss 变量和基础样式须集中管理、一次注入；在 angular.json 中配置 stylepreprocessoroptions.includepaths: ["src/styles"]，使所有组件 scss 可直接 @import 'variables' 或 'base'，文件名必须以下划线开头（如 _variables.scss），且仅在 src/styles.scss 中导入一次，禁止组件内手动路径导入。
全局 SCSS 变量和基础样式必须集中管理、一次注入；组件局部 CSS 要靠 ViewEncapsulation + BEM + 局部变量隔离，不能混用作用域。
angular.json 中配置 stylePreprocessorOptions.includePaths
这是让所有组件 SCSS 文件能直接 @import 'variables' 的前提。路径必须是数组、相对项目根目录、只含正斜杠、指向目录而非文件：
-
includePaths: ["src/styles"]✅（正确，_variables.scss和_base.scss放在src/styles/下） -
includePaths: ["./src/styles"]❌（带.前缀，CLI 忽略） -
includePaths: ["src\styles"]❌（Windows 反斜杠，不识别） -
includePaths: ["src/styles/_variables.scss"]❌（不是目录路径，报错）
改完必须重启 ng serve，否则新路径不生效。
全局变量和基础样式只在 styles.scss 中导入一次
不要在任何组件 SCSS 里手动 @import '../styles/_variables.scss' —— 那会破坏作用域、引发重复定义错误，且组件移动后路径立刻失效。
- 在
src/styles.scss里写：@import 'variables'; @import 'base'; - 变量文件必须叫
_variables.scss（下划线开头），否则会被当作普通样式单独编译 -
_base.scss里只写原子规则（如h2、button默认样式），避免:host或深度穿透选择器 - 如果用了
@use（Angular ≥13），注意它默认创建私有命名空间，需显式with或as *才能暴露变量
组件局部 CSS 用 BEM + 局部变量 + ViewEncapsulation
组件内样式不该依赖全局变量做微调，而应保持独立可移植性。Angular 默认的 ViewEncapsulation.Emulated 已帮你隔离了类名，但得配合规范写法：
- 用 BEM 命名：如
.user-card、.user-card__header、.user-card--compact - 局部变量加前缀：
$user-card-padding-sm: 8px;，不覆盖$padding-sm - 响应式计算放组件内：
@media (max-width: 768px) { $offset: $user-card-padding-sm * 1.2; margin-left: $offset; } - 禁用封装仅当真需要穿透（如第三方库子元素定制），改用
ViewEncapsulation.None并加body前缀防污染
构建时全局样式失效的典型原因
ng build --prod 后 Undefined variable: "$color-primary" 这类报错，90% 是路径或命名没对上：
- 检查
angular.json中stylePreprocessorOptions.includePaths是否在projects → [name] → architect → build → options下，而不是塞进serve或test的配置里 - 确认
_variables.scss确实放在includePaths指向的目录下，且文件名以下划线开头 - 别在组件 SCSS 里写
@import './variables'—— 这是相对路径查找，绕过了includePaths机制 - 如果用了 Tailwind，确保
tailwind.config.js的content包含src/**/*.html和src/**/*.ts，否则 PurgeCSS 可能删掉你用到的类
真正容易被忽略的是：SCSS 的 @import 本质是文本拼接+作用域合并，不是模块引用；变量一旦在某个作用域定义过，后续同名定义就会报错 —— 所以“只导入一次”不是建议，是必须。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
