基準テーマからテーマを拡張する
この記事では、Microsoft Dynamics 365 Commerce オンライン サイトの基準テーマからテーマを拡張する方法について説明します。
Dynamics 365 Commerce オンライン ストア拡張機能ソフトウェア開発キット (SDK) を使用することにより、スタンドアロンのテーマであるテーマ、または基準テーマから拡張されたテーマのいずれかを作成することができます。 たとえば、モジュール、モジュール ビュー拡張機能、およびモジュール定義拡張機能の Cascading Style Sheets (CSS) スタイルを定義する基準テーマを作成できます。 その後、基準テーマの上に変更を追加する別のテーマ、または一連のテーマを作成できます。 この機能は、単一の Dynamics 365 環境に、異なるブランディングのテーマを使用する複数のオンライン サイトがある場合に役立ちます。
基準テーマを指定する
テーマの基準テーマを指定するには、テーマ定義ファイルを編集し、基準テーマを指し示す $ref セクションを追加します。
次の例において、$ref セクションは、モジュール ライブラリの一部として含まれている fabrikam サンプル テーマを参照しています。
{
"$ref": "@msdyn365-commerce-modules/fabrikam-design-kit/dist/lib/modules/fabrikam/fabrikam.definition.json",
"$type": "themeModule",
"description": "This is SDK template theme module",
"friendlyName": "adventureworks",
"name": "adventureworks"
}
例
次の例では、add-theme コマンド ライン インターフェイス (CLI) コマンドを使用して、基準テーマを作成しています。
yarn msdyn365 add-theme base
作成された基準テーマの定義ファイルを次に示します。
basetheme.definition.json
{
"$type": "themeModule",
"description": "This is SDK template theme module",
"friendlyName": "base",
"name": "base"
}
次に、CLI コマンドを使用して、拡張という名前のテーマを作成します。
yarn msdyn365 add-theme extended
ここに示すように、拡張テーマの定義ファイルは、相対パスを使用して基準テーマを参照できるようになりました。
extended.definition.json
{
"$ref": "../base/base.definition.json",
"$type": "themeModule",
"description": "This is SDK template theme module",
"friendlyName": "extended",
"name": "extended"
}
基準テーマのスタイルを含める
既定では、基準テーマのスタイルは、拡張テーマに含まれません。 ここに示すように、基準テーマのスタイルを含めるために、extended.theme.scss ファイルに参照を追加することができます。 この例では、他のスタイルを追加する方法も示します。
extended.theme.scss
@import "../../base/styles/base.theme.scss";
body {
background-color: red;
}
次の例は、前の例に似ています。 必要に応じて、extended.definition.scss.json ファイルに基準テーマへの参照を追加することもできることが示されています。
extended.definition.scss.json
{
"$ref": "../../base/styles/base.definition.scss.json",
"name": "extended"
}