Get into the habit of writing together! This is the 16th day of my participation in the "Nuggets Daily New Plan·April Update Challenge", click to view the event details .

There is no record related to style under the angular.json projectsnode :

Also not in build:

this Storefrontstyles:

Dependencies defined in storefrontstylesthis folder.package.jsonhamburgers

style library name:@spartacus/styles

peerDependenciesAs feature libraryreferenced by others:

All content can be @importimported :

Configuring styling

Spartacus provides two styles of customization. First, the global look of your site can be changed by providing a custom theme. Second, Spartacus provides a Flexible Stylingmechanism called flexible styles, which allow styles to be changed at the component level.

theming

A theme in Spartacus refers to the global look of a website. This includes (but is not limited to) color, font and font size. By re-theming Spartacus, you can create a website with your own custom branding and identity.

Spartacus provides a default style library called Sparta in the @spartacus/styles package. This package should be imported into your project via the styles.scssfile .

As shown below:

There are three possible ways to personalize the Spartacus theme.

Override global variables

默认的 Sparta 主题提供了大量的变量，可以覆盖这些变量来自定义主题。这些变量包含在@spartacus/styles/scss/theme/sparta/_variables 中。为了给 scss 变量分配一个新值，变量中的值必须在库导入之前重新分配。

例子：

$primary: #e502bf
$font-weight-normal: 500;

@import '~@spartacus/styles/index';
复制代码

Extending Sparta theme

当变量没有提供足够的配置选项但您希望重用 Sparta 的某些样式时，扩展 Sparta 主题很有用。

可以通过创建新库并导入默认主题来扩展库。具体步骤如下：

创建一个新的 theme library：

custom-styles/index.scss

然后在里面导入 default theme：

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

// Custom Style or imports from other files
复制代码

最后，在项目的 styles.scss 里面，导入自定义 theme library：

@import 'custom-styles/index.scss';
复制代码

另一种方法是创建一个新库，并在默认主题之后导入到项目中。

@import '~@spartacus/styles/index';
@import 'custom-styles/index.scss';
复制代码

Creating a brand new theme library

这种方式的主题覆盖是完全省略默认样式导入。

因此，必须复制 Sparta 中存在的所有类和变量（可以修改），或者必须从项目中删除它们的使用。

Flexible styling

对于更细粒度的定制，可以直接影响每个组件的样式。每个组件的样式中内置了一组可以被覆盖的自定义属性（css 变量）。这些变量可以从浏览器的检查器中查看。

以下过程将演示更新组件样式的步骤。

使用浏览器的检查器工具找到组件的选择器。
使用检查器查看组件的标记和可用变量。
在您选择的文件中编写自定义 SCSS（必须通过标准 Angular/SCSS 构建包含在构建中）。自定义样式必须遵循这些规则。

引用组件是通过它们的选择器完成的，例如 cx-product-images
它必须覆盖默认类和规则
规则可通过 css 变量自定义

以下示例代码演示了 product image component 中 thumb 的配置。

默认：

:host {
  display: flex;
  flex-direction: var(--cx-flex-direction, column);
}

.thumbs {
  display: flex;
  justify-content: flex-start;
  [...]
}
复制代码

自定义：

cx-product-images {
  --cx-flex-direction: row-reverse;
  justify-content: flex-end;

  .thumbs {
    flex-direction: column;
  }
}
复制代码

可以将自定义 SCSS 直接写入应用程序的 style.scss 文件或应用程序中包含的任何其他样式表中。

Rules from custom SCSS 不会override default rules. Rules that already exist in Spartacus can be overridden with custom properties.

For example, the following is the rule of the Spartacus standard:

cx-cart {
  .container {
    margin: var(--cx-margin, 0);
  }
}
复制代码

The following code does not modify the marginproperty , but changes the displayeffect.

cx-cart {
  .container {
    display: inline-block;
    margin: 0 10px;
  }
}
复制代码

The following code overrides marginboth and displayproperties:

cx-cart {
  .container {
    display: inline-block;
    --cx-margin: 0 10px;
  }
}
复制代码

Introduction to the style library of SAP e-commerce cloud Spartacus UI