Spartacus 專案的 angular.json 的 `projects` 節點下面，並沒有和 style 相關的記錄：

![](https://img-blog.csdnimg.cn/img_convert/ce51f8d9a6025dbdee157138b56555ee.png)

build 裡也同樣沒有：
![](https://img-blog.csdnimg.cn/img_convert/b4a94b99d1603f252ab2c10dd3a365e4.png)

這個 `Storefrontstyles`：

![](https://img-blog.csdnimg.cn/img_convert/d677f8fbb9ad852004faea26993b874c.png)

這個 `storefrontstyles` 資料夾下的 `package.json` 裡定義了 `hamburgers` 的依賴。

![](https://img-blog.csdnimg.cn/img_convert/94400e5aebc987334e57df2394b4e6a1.png)

![](https://img-blog.csdnimg.cn/img_convert/5cd9c5dd14bf659c732e545fb57bddcd.png)

style library 名稱：`@spartacus/styles`

![](https://img-blog.csdnimg.cn/img_convert/9add7731a5a1f9621c0fdc6935386d87.png)

作為 `peerDependencies` 被其他 `feature library` 引用：

![](https://img-blog.csdnimg.cn/img_convert/2f2367aa3dada3eb89d0c7cee86faca7.png)

全部內容可以被其他 project 採用 `@import` 匯入：

![](https://img-blog.csdnimg.cn/img_convert/811629de70cec3f78b48e1aa7e84272e.png)

# Configuring styling

Spartacus 提供了兩種樣式自定義方法。首先，可以透過提供自定義主題來更改站點的全域性外觀。其次，Spartacus 提供了一種稱為靈活樣式， `Flexible Styling` 的機制，它允許在元件級別更改樣式。

# theming

Spartacus 中的主題是指網站的全域性外觀。這包括（但不限於）顏色、字型和字型大小。透過重新設定 Spartacus 的主題，可以建立一個具有您自己的自定義品牌和身份的網站。

Spartacus 在 @spartacus/styles 包中提供了一個名為 Sparta 的預設樣式庫。這個包應該透過 `styles.scss` 檔案匯入到您的專案中。

如下圖所示：
![](https://img-blog.csdnimg.cn/img_convert/99f221ba4d183cdd21c81514a183d165.png)

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

## 覆蓋全域性變數

預設的 Sparta 主題提供了大量的變數，可以覆蓋這些變數來自定義主題。這些變數包含在@spartacus/styles/scss/theme/sparta/_variables 中。為了給 scss 變數分配一個新值，變數中的值必須在庫匯入之前重新分配。

![](https://img-blog.csdnimg.cn/img_convert/844c8542161685e7e424767195a9c5e8.png)

例子：

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

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

## Extending Sparta theme

當變數沒有提供足夠的配置選項但您希望重用 Sparta 的某些樣式時，擴充套件 Sparta 主題很有用。

可以透過建立新庫並匯入預設主題來擴充套件庫。 具體步驟如下：

建立一個新的 theme library：

`custom-styles/index.scss`

然後在裡面匯入 default theme：

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

// Custom Style or imports from other files
```

最後，在專案的 `styles.scss` 裡面，匯入自定義 theme library：

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

另一種方法是建立一個新庫，並在預設主題之後匯入到專案中。

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

## Creating a brand new theme library

這種方式的主題覆蓋是完全省略預設樣式匯入。

因此，必須複製 Sparta 中存在的所有類和變數（可以修改），或者必須從專案中刪除它們的使用。

# Flexible styling

對於更細粒度的定製，可以直接影響每個元件的樣式。 每個元件的樣式中內建了一組可以被覆蓋的自定義屬性（css 變數）。 這些變數可以從瀏覽器的檢查器中檢視。

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

1. 使用瀏覽器的檢查器工具找到元件的選擇器。
2. 使用檢查器檢視元件的標記和可用變數。
3. 在您選擇的檔案中編寫自定義 SCSS（必須透過標準 Angular/SCSS 構建包含在構建中）。 自定義樣式必須遵循這些規則。

- 引用元件是透過它們的選擇器完成的，例如 `cx-product-images`
- 它必須覆蓋預設類和規則
- 規則可透過 css 變數自定義

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

預設：

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

.thumbs {
  display: flex;
  justify-content: flex-start;
  [...]
}
```

自定義：

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

.thumbs {
    flex-direction: column;
  }
}
```

可以將自定義 SCSS 直接寫入應用程式的 style.scss 檔案或應用程式中包含的任何其他樣式表中。

來自自定義 SCSS 的規則`不會`覆蓋預設規則。 Spartacus 中已經存在的規則可以使用自定義屬性覆蓋。

例如下面是 Spartacus 標準的 rule：

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

以下程式碼不會修改 `margin` 屬性，但會更改 `display` 效果。

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

下列程式碼會同時覆蓋 `margin` 和 `display` 屬性：

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

SAP 電商雲 Spartacus UI 的 style library 介紹

相關文章