Spartacus 項目的 angular.json 的 projects 節點下面，并沒有和 style 相關的記錄：

build 里也同樣沒有：

這個 Storefrontstyles：

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

style library 名稱：@spartacus/styles

作為 peerDependencies 被其他 feature library 引用：

全部內容可以被其他 project 采用 @import 導入：

Configuring styling

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

theming

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

Spartacus 在 @spartacus/styles 包中提供了一個名為 Sparta 的默認樣式庫。這個包應該通過 styles.scss 文件導入到您的項目中。

如下圖所示：

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

覆蓋全局變量

默認的 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 文件或應用程序中包含的任何其他樣式表中。

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

例如下面是 Spartacus 標準的 rule：

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

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

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

下列代碼會同時覆蓋 margin 和 display 屬性：

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

總結

以上是生活随笔為你收集整理的SAP 电商云 Spartacus UI 的 style library 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。