核心是两步：将变量抽成_variables.scss文件并置于src/styles等目录，再在angular.json中配置stylePreprocessorOptions.includePaths: ["src/styles"]，使所有组件SCSS可通过@import 'variables'直接使用$xxx变量。
直接在 styles.scss 里 @import 变量文件，再配好 stylePreprocessorOptions.includePaths，就能让所有组件的 SCSS 文件无须重复写路径，直接用 $color-primary 这类变量。
怎么让每个组件的 SCSS 都能直接访问 $xxx 变量？
核心是两步：把变量定义抽成单独文件（比如 src/styles/_variables.scss），然后让 Angular CLI 在编译时“知道”它在哪。不是靠 @import '../styles/variables' 手动写路径，而是靠预处理器自动注入。
-
angular.json中的stylePreprocessorOptions.includePaths必须设为数组，内容是相对于项目根目录（即angular.json所在位置）的路径，例如["src/styles"] - 变量文件名必须以下划线开头（如
_variables.scss），否则会被当作普通样式文件单独编译，可能报错或引入两次 - 不要在组件的 SCSS 里手动
@import变量——那会破坏复用性，也容易因相对路径出错；正确做法是只在styles.scss里导入一次，靠includePaths让所有 SCSS 文件共享作用域 - 如果用了
ng build --prod后变量失效，大概率是includePaths路径写成了./src/styles或src\styles（Windows 反斜杠）——只接受正斜杠、且不能带前缀
为什么 @import 'variables' 能生效，而 @import './variables' 就报错？
includePaths 的作用是扩展 SCSS 的查找范围，类似 Node.js 的 node_modules 查找逻辑。当你写 @import 'variables'，SCSS 编译器会在每个 includePaths 目录下找 variables.scss 或 _variables.scss；但写 @import './variables' 是强制走当前文件所在目录的相对路径，绕过了 includePaths 机制，自然找不到。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 错误示例：
@import './styles/variables'—— 路径硬编码，组件移动后就断 - 正确写法：
@import 'variables'（前提是includePaths: ["src/styles"]，且文件名为_variables.scss） - 如果变量文件放在
src/assets/scss/_theme.scss，那includePaths就得写["src/assets/scss"]，不能漏掉scss这一级
全局变量和 :root CSS 自定义属性混用要注意什么？
SCSS 变量（$xxx）只在编译期有效，无法被 JS 读取；CSS 自定义属性（--color-primary）运行时可用，但不支持计算、条件等 SCSS 特性。两者不是替代关系，而是互补。
立即学习“前端免费学习笔记（深入）”；
- 主题色、断点、z-index 等需要参与运算的，坚持用
$xxx，在styles.scss里统一导出到:root：:root { --color-primary: #{$color-primary}; --spacing-xs: #{$spacing-xs}; } - JS 需要动态改主题时，只能操作
--xxx，此时$xxx已消失——别指望用document.documentElement.style.setProperty('--color-primary', $color-primary)，SCSS 变量编译后不存在 - 组件内若同时用
$color-primary和var(--color-primary)，注意优先级：后者可被 JS 修改覆盖前者，但前者无法反向影响后者
最易忽略的是 includePaths 和文件命名规则的耦合——少一个下划线、路径多一层 ../、或者 angular.json 里写成字符串而非数组，都会导致变量“看似引入了，实际没生效”。调试时先检查编译输出里有没有报 file to import not found，比在浏览器里反复 inspect 更快。
