时间戳

首页 > 解决方案 > Spartacus 3.3 - 如何扩展默认店面主题（Sparta）？

css - Spartacus 3.3 - 如何扩展默认店面主题（Sparta）？

问题描述

有人可以建议我通过仅覆盖我需要更改的 CSS var 来扩展默认 Spartacus Storefront 主题 (Sparta) 的最佳方法吗？

我遵循了这个 URL 上的指南：https ://github.com/SAP/spartacus/blob/develop/projects/storefrontstyles/docs/flex-styling.md ，但推荐的方法似乎都不起作用。

在此先感谢您的帮助。

标签： cssspartacus-storefront

解决方案

Sparta 主题提供了许多可以覆盖以自定义主题的变量。所有这些都可以在@spartacus/styles/scss/theme/sparta/_variables.

styles.scss要覆盖任何 SCSS 变量，只需在导入 Spartacus 库之前将它们分配给文件中的新值。

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

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

Spartacus 还提供了一组稳定的变量，CSS 变量主要用于配色方案和字体定义，可以在文档的根目录下自定义，也可以针对特定的选择器进行自定义。

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

:root {
  --cx-color-dark: red;
}

可以在此处找到有关 Spartacus 样式的更多信息：https ://sap.github.io/spartacus-docs/css-architecture/

推荐阅读