Spartacus 項(xiàng)目的 angular.json 的 projects 節(jié)點(diǎn)下面，并沒有和 style 相關(guān)的記錄：

build 里也同樣沒有：

這個(gè) Storefrontstyles：

這個(gè) storefrontstyles 文件夾下的 package.json 里定義了 hamburgers 的依賴。

style library 名稱：@spartacus/styles

作為 peerDependencies 被其他 feature library 引用：

全部?jī)?nèi)容可以被其他 project 采用 @import 導(dǎo)入：

Configuring styling

Spartacus 提供了兩種樣式自定義方法。首先，可以通過提供自定義主題來更改站點(diǎn)的全局外觀。其次，Spartacus 提供了一種稱為靈活樣式， Flexible Styling 的機(jī)制，它允許在組件級(jí)別更改樣式。

theming

Spartacus 中的主題是指網(wǎng)站的全局外觀。這包括（但不限于）顏色、字體和字體大小。通過重新設(shè)置 Spartacus 的主題，可以創(chuàng)建一個(gè)具有您自己的自定義品牌和身份的網(wǎng)站。

Spartacus 在 @spartacus/styles 包中提供了一個(gè)名為 Sparta 的默認(rèn)樣式庫。這個(gè)包應(yīng)該通過 styles.scss 文件導(dǎo)入到您的項(xiàng)目中。

如下圖所示：

有三種可能的方式來個(gè)性化 Spartacus 的主題。

覆蓋全局變量

默認(rèn)的 Sparta 主題提供了大量的變量，可以覆蓋這些變量來自定義主題。這些變量包含在@spartacus/styles/scss/theme/sparta/_variables 中。為了給 scss 變量分配一個(gè)新值，變量中的值必須在庫導(dǎo)入之前重新分配。

例子：

$primary: #e502bf$font-weight-normal: 500;@import '~@spartacus/styles/index';

Extending Sparta theme

當(dāng)變量沒有提供足夠的配置選項(xiàng)但您希望重用 Sparta 的某些樣式時(shí)，擴(kuò)展 Sparta 主題很有用。

可以通過創(chuàng)建新庫并導(dǎo)入默認(rèn)主題來擴(kuò)展庫。 具體步驟如下：

創(chuàng)建一個(gè)新的 theme library：

custom-styles/index.scss

然后在里面導(dǎo)入 default theme：

@import '~@spartacus/styles/index';// Custom Style or imports from other files

最后，在項(xiàng)目的 styles.scss 里面，導(dǎo)入自定義 theme library：

@import 'custom-styles/index.scss';

另一種方法是創(chuàng)建一個(gè)新庫，并在默認(rèn)主題之后導(dǎo)入到項(xiàng)目中。

@import '~@spartacus/styles/index';@import 'custom-styles/index.scss';

Creating a brand new theme library

這種方式的主題覆蓋是完全省略默認(rèn)樣式導(dǎo)入。

因此，必須復(fù)制 Sparta 中存在的所有類和變量（可以修改），或者必須從項(xiàng)目中刪除它們的使用。

Flexible styling

對(duì)于更細(xì)粒度的定制，可以直接影響每個(gè)組件的樣式。 每個(gè)組件的樣式中內(nèi)置了一組可以被覆蓋的自定義屬性（css 變量）。 這些變量可以從瀏覽器的檢查器中查看。

以下過程將演示更新組件樣式的步驟。

1. 使用瀏覽器的檢查器工具找到組件的選擇器。

2. 使用檢查器查看組件的標(biāo)記和可用變量。

3. 在您選擇的文件中編寫自定義 SCSS（必須通過標(biāo)準(zhǔn) Angular/SCSS 構(gòu)建包含在構(gòu)建中）。 自定義樣式必須遵循這些規(guī)則。

4. 引用組件是通過它們的選擇器完成的，例如 cx-product-images

5. 它必須覆蓋默認(rèn)類和規(guī)則

6. 規(guī)則可通過 css 變量自定義

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

默認(rèn)：

: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 直接寫入應(yīng)用程序的 style.scss 文件或應(yīng)用程序中包含的任何其他樣式表中。

來自自定義 SCSS 的規(guī)則不會(huì)覆蓋默認(rèn)規(guī)則。 Spartacus 中已經(jīng)存在的規(guī)則可以使用自定義屬性覆蓋。

例如下面是 Spartacus 標(biāo)準(zhǔn)的 rule：

cx-cart {
  .container {
    margin: var(--cx-margin, 0);
  }}

以下代碼不會(huì)修改 margin 屬性，但會(huì)更改 display 效果。

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

下列代碼會(huì)同時(shí)覆蓋 margin 和 display 屬性：

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