Spartacus 4 - 如何扩展默认店面主题？

Question

我在 Spartacus 4.0.1 中尝试了基本的原色更改，但它似乎被默认样式覆盖了。遵循指南：https://sap.github.io/spartacus-docs/css-architecture/

是否有解决此问题的方法，或者它是否已在较新版本中修复？

这是我的代码 mystore/src/styles.scss:

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

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

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

screenshot showing my style is being overwritten

Answer 1

从 4.0 版开始，覆盖基本原色的最简单和推荐的方法是更改 CSS 变量的编译值。但是在 CSS body 选择器中更改它们，而不是 :root 选择器。

storefrontapp/src/styles.scss 文件示例：

$useLatestStyles: true;

@import '@spartacus/styles';
@import '@spartacus/styles/scss/theme/santorini';

body {
  --cx-color-primary: #a7fff6;
  --cx-color-seconday: #8aa39b;
  --cx-color-text: #5c6f68;
  --cx-color-background: #95d9c3;
  --cx-color-dark: #a4f9c8;
}

Answer 2

我今天遇到了同样的问题。查看根文件夹中的 angular.json 文件。有一个部分定义了加载的样式。对我来说，这看起来像这样：

"styles": [
   "src/styles.scss"
   "src/styles/spartacus/user.scss",
   "src/styles/spartacus/organization.scss",
   "src/styles/spartacus/checkout.scss",
   "src/styles/spartacus/cart.scss",
],

我注意到在 user.scss 和所有其他导入中导入了标准 @spartacus/styles 库在顶部。因此，您在 styles.scss 中所做的一切都会被这些导入再次覆盖。

我现在的做法是将 styles.scss 放在最后。所以什么都没有被覆盖。

"styles": [
  "src/styles/spartacus/user.scss",
  "src/styles/spartacus/organization.scss",
  "src/styles/spartacus/checkout.scss",
  "src/styles/spartacus/cart.scss",
  "src/styles.scss"
],

对我来说，这样的顺序似乎是一个错误。稍后可能会报告。

Spartacus 4 - 如何扩展默认店面主题？

Spartacus 4 - How to extend default Storefront theme?

spartacus-storefront