正确做法是：将变量抽离为_variables.scss并置于src/styles，在angular.json中配置stylepreprocessoroptions.includepaths: ["src/styles"]，再于styles.scss中@import 'variables'，使所有组件scss可直接使用$xxx变量。
直接在组件 SCSS 文件里定义 $color-primary 这类变量，无法被其他组件复用，也不符合 Angular 的模块化设计逻辑——局部变量只该用于单个组件内部的样式微调，全局常量必须抽离、注入、统一管理。
为什么不能在组件 SCSS 里直接 @import '../styles/_variables.scss'？
路径硬编码导致可维护性崩塌：组件移动后 @import 路径立刻失效；多个组件重复 import 同一文件，SCSS 编译器可能多次解析变量，引发“duplicate variable definition”错误；更关键的是，它绕过了 Angular CLI 的预处理器作用域机制，失去全局变量注入能力。
- 正确做法是只在
src/styles.scss中@import 'variables'一次 - 变量文件必须命名为
_variables.scss（以下划线开头） -
angular.json中配置stylePreprocessorOptions.includePaths: ["src/styles"]，让所有 SCSS 文件都能把src/styles当作根目录来 resolve@import 'variables'
includePaths 配置写错的典型表现和修复
运行 ng build --prod 后变量突然报错 Undefined variable: "$color-primary"，基本就是 includePaths 路径写错了。常见错误包括：
- 写成
./src/styles或src\styles（Windows 反斜杠）——只接受正斜杠、无前缀的相对路径 - 路径指向了文件而非目录，比如
["src/styles/_variables.scss"]——includePaths必须是目录路径 - 变量文件放在
src/assets/scss/_theme.scss，但includePaths漏写了scss这一级，写成["src/assets"]就找不到
哪些场景适合用局部变量，而不是全局变量？
组件内部的临时计算、仅本组件使用的主题变体、响应式断点偏移量等，才需要局部变量。例如：
// demo.component.scss
$padding-xs: 4px;
$padding-sm: 8px;
<p>:host {
padding: $padding-sm;
}</p><p>@media (max-width: 768px) {
$padding-mobile: $padding-xs * 1.5;
padding: $padding-mobile;
}</p>
- 局部变量命名建议加组件前缀，如
$demo-padding-sm，避免和全局变量冲突 - 不要用局部变量覆盖全局同名变量（如
$color-primary: red），这会破坏主题一致性 - 局部变量不参与跨组件复用，也不该出现在
_variables.scss里
真正容易被忽略的点是：SCSS 的 @import 和 JavaScript 的 import 完全不同——它不是“引用”，而是“文本拼接+作用域合并”。所以 includePaths 不是路径别名，而是编译期查找目录列表；而局部变量的生命只存在于当前文件块内，根本不会泄漏出去。搞不清这点，就容易把变量当 JS 常量去“导出导入”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
