Spartacus 4如何扩展默认Storefront主题？修改主色被覆盖如何解决

解决方案 #

4.0.1版本可行规避方案 #

• 方案一：提高自定义CSS变量优先级
  将你现有代码中的:root选择器替换为优先级更高的html:root，即可覆盖默认样式的变量声明：

$primary: green;
$font-weight-normal: 600;

$styleVersion: 4.0;
@import "~@spartacus/styles/index";

html:root {
    --cx-color-primary: green;
}

如果仍有覆盖问题，可临时添加!important修饰，不建议作为长期方案使用。

• 方案二：完善Sass变量覆盖配置
  Spartacus 4.x版本需要显式将自定义色值传入$theme配置才能全局生效，调整导入前的变量声明即可：

$primary: green;
$font-weight-normal: 600;

// 新增theme配置覆盖
$theme: (
  primary: $primary
);

$styleVersion: 4.0;
@import "~@spartacus/styles/index";

版本修复说明 #

该CSS变量优先级异常问题为Spartacus 4.0.x版本的已知缺陷，在4.2.0及之后的正式版本中已完成修复，升级后按照官方文档的标准写法配置即可生效，无需额外调整优先级。

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