如何用SCSS变量覆盖CSS变量值（PrimeNG场景）

我在使用PrimeNG框架时，需要覆盖其内置的CSS变量值。以徽章（Badge）组件的背景色为例，通过浏览器调试控制台可以看到当前应用的样式为：

background: var(--p-badge-primary-background);

目前我使用固定颜色值的样式代码可以正常工作：

@import "styleGuide";

.p-badge {
  --p-badge-primary-background: red;
}

但为了简化样式模板的调整，我希望直接使用已导入的StyleGuide中的SCSS变量来赋值，避免逐个修改固定颜色值，期望实现的代码如下：

.p-badge {
  --p-badge-primary-background: $color-brand-primary; 
}

解决方案 #

直接按上述期望的代码编写即可。SCSS预处理器在编译阶段会自动将$color-brand-primary替换为StyleGuide中定义的对应颜色值，最终生成的CSS会将--p-badge-primary-background设置为该实际颜色，从而实现PrimeNG组件样式的动态覆盖。

注意：请确保SCSS变量名拼写正确（示例中的$color-brand-primairy存在拼写错误，应为$color-brand-primary），必须与StyleGuide中定义的变量名完全一致，否则会出现编译错误。

内容的提问来源于stack exchange，提问作者Babulaas