一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して16日目です。クリックしてイベントの詳細をご覧ください。

Spartacusプロジェクトのangular.jsonprojectsノード下にスタイルに関連するレコードはありません：

また、ビルドされていません：

これStorefrontstyles：

storefrontstylesこのフォルダpackage.jsonで定義hamburgersされている依存関係。

スタイルライブラリ名：@spartacus/styles

peerDependencies他feature libraryの人が参照しているように：

すべてのコンテンツは他のプロジェクト@importからインポート：

スタイリングの構成

Spartacusは、2つのスタイルのカスタマイズを提供します。まず、カスタムテーマを提供することで、サイトのグローバルな外観を変更できます。次に、Spartacusは、Flexible Styling柔軟なスタイルと呼ばれるメカニズムを提供します。これにより、コンポーネントレベルでスタイルを変更できます。

テーマ

Spartacusのテーマは、Webサイトのグローバルな外観を指します。これには、色、フォント、フォントサイズが含まれます（ただし、これらに限定されません）。Spartacusのテーマを変更することで、独自のカスタムブランディングとアイデンティティを備えたWebサイトを作成できます。

Spartacusは、@ spartacus/stylesパッケージでSpartaと呼ばれるデフォルトのスタイルライブラリを提供します。このパッケージは、styles.scssファイル。

以下に示すように：

Spartacusテーマをパーソナライズする方法は3つあります。

グローバル変数をオーバーライドする

默认的 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標準のルールは次のとおりです。

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;
  }
}
复制代码

SAPeコマースクラウドSpartacusUIのスタイルライブラリの概要

スタイリングの構成

テーマ

グローバル変数をオーバーライドする

Extending Sparta theme

Creating a brand new theme library

Flexible styling

おすすめ