Spartacus Storefront 自定义主题示例？改变颜色和引导变量？答案

【问题标题】：Spartacus Storefront custom theme examples? Changing colors and bootstrap variables?Spartacus Storefront 自定义主题示例？改变颜色和引导变量？
【发布时间】：2021-07-13 10:38:27
【问题描述】：

似乎没有明确的 Spartacus 自定义店面或自定义样式/主题示例。

我想了解如何实现自定义主题，其中我们有不同的颜色和主题默认值。我找不到任何关于如何使用 Spartacus 正确执行此操作的示例。我错过了什么吗？

非常感谢任何反馈。

我所期望的一个例子：

src/styles.scss

/* You can add global styles to this file, and also import other style files */

$styleVersion: 3.2;

// change theme-colors here
$primary: #000;
$secondary: #000;
$success: #5dac06;
$danger: #db0002;
$warning: #ffc107;
$info: #17a2b8;
$light: #d3d6db;
$dark: #000;
$background: #f4f4f4;
$inverse: #ffffff;
$text: #212738;

@import '~@spartacus/styles/index';

引导程序默认值不会被覆盖。任何人都可以简单地分享一个我应该如何与斯巴达克斯一起做这件事的例子。

【问题讨论】：

您可以查看这里以获取在 Spartacus 中实现的自定义主题的示例。它在根 styles.scss 中导入默认的 spartacus 样式，并继续在 styles 目录中覆盖它们：github.com/DivanteLtd/spartacus-capybara/tree/develop/src

标签： angular sass angular-ui-bootstrap spartacus-storefront

【解决方案1】：

昨天我尝试了新的 3.2 版本，发现覆盖主题变量的“旧”方式不再有效。但是我也找不到任何关于它为什么不再起作用以及现在应该如何做的文档。我唯一能发现的是我可以覆盖 CSS 自定义属性。但只有当我将其设置为重要时。它有效，但这不是正确的方法。有没有人有进一步的信息？


$styleVersion: 3.2;

:root {
  --cx-color-primary: dodgerblue !important;
}

@import '~@spartacus/styles/index';

【讨论】：

这也是我目前一直在使用的方法。这有点令人沮丧。首先使用 Sass 时覆盖 CSS 似乎是多余的。我注意到 Spartacus 实际上覆盖了一些用于引导程序的核心 css，目前这些 css 不能被禁用。
作为参考，下面的部分是覆盖发生的地方：github.com/SAP/spartacus-styles-builds/blob/…
好的，我知道了怎么做。我发布了这个问题的答案。它与 $theme-colors 变量有关。我用更新后的颜色添加了它，现在它可以按预期工作了。
嗨@AdrianHolmes，我试过你的答案，但它仍然不适合我。我在您的答案中复制了代码，但样式仍然被 Spartacus 样式覆盖。除了添加 $theme-colors 之外，您是否更改了其他任何内容？
原来它最初确实覆盖了变量，但似乎有双重CSS覆盖它。似乎在开发环境中 CSS 是重复的。我需要对此进行更多调查......

【解决方案2】：

如果其他人可能需要此信息，我将发布此信息。原来我已经接近了，我只需要添加一个额外的部分：

/* You can add global styles to this file, and also import other style files */

$styleVersion: 3.2;


// change theme-colors here
$primary: #38a8ae !default;
$secondary: #148181 !default;
$success: #5dac06 !default;
$danger: #e51f34 !default;
$warning: #ffc107 !default;
$info: #17a2b8 !default;
$light: #d3d6db !default;
$dark: #161C23 !default;
$background: #f4f4f4 !default;
$inverse: #ffffff !default;
$text: #000000 !default;
$transparent: transparent !default;
$visual-focus: #6d9df7 !default;
$background-focus: rgba(80, 176, 244, 0.1);

$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'danger': $danger,
  'warning': $warning,
  'info': $info,
  'light': $light,
  'dark': $dark,
  'background': $background,
  'inverse': $inverse,
  'text': $text,
  'transparent': $transparent,
  'visual-focus': $visual-focus,
  'background-focus': $background-focus,
);


@import '~@spartacus/styles/index';

我需要添加带有更新颜色的 $theme-colors 变量。现在 CSS 已正确编译，无需覆盖 css。

【讨论】：