アプリケーション・スタイルのカスタマイズ

新規画面のスタイルを .scss 形式で設定することも、既存の画面のスタイルを変更することもできます。アプリケーション提供のグローバル・スタイルと共通スタイルは、 <store-temp>/packages/libs/styles ディレクトリーにある @store/styles ライブラリーで使用できます。

アプリケーション提供のスタイル変数を変更し、 <store-temp>/extensions/libs/styles ディレクトリーにある @store-extensions/styles ライブラリーにカスタム・スタイルを導入することができます。

以下の表は、ディレクトリー・レイアウトを示しています。

表 1. アプリケーションスタイルのカスタマイズ
ディレクトリー・パス	説明
extensions/libs/styles	ライブラリは、アプリケーションが提供するSASSスタイル変数を上書きし、拡張機能で使用するカスタムスタイルを追加するために使用されます。
extensions/libs/styles/src/styles/custom_styles.scss	このファイルでカスタムフォント、画像、セレクタを定義します。
extensions/libs/styles/src/styles/variables_extn.scss	アプリケーション提供の SCSS 変数値を変更して、このファイルに入れることができます。
extensions/libs/styles/webpack.config.js	カスタム・スタイルの CSS ファイルをビルドして生成するための Web パック構成。

アプリケーション提供のスタイルをカスタマイズしたり、カスタム・スタイルを追加したりすることができます。

サポートされるビジネス・ユース・ケースは以下のとおりです。

既存の SCSS 変数のオーバーライド
カスタム・アイコン・フォントの追加
カスタム・イメージの追加
カスタム SCSS セレクターの追加

アプリケーション・スタイルをカスタマイズする際には、必ず以下のガイドラインに従ってください。

既存のセレクターはオーバーライドしないでください。
画像のコピー用に新しいプラグインを追加する場合を除き、既存の <store-temp>/extensions/libs/styles/webpack.config.js 構成は変更しないでください。
<store-temp>/extensions/libs/styles/package.jsonのスクリプトは変更しないでください。

既存の SCSS 変数のオーバーライド

新しい SCSS 変数をオーバーライドまたは追加することにより、アプリケーションの外観をカスタマイズできます。

アプリケーション提供の変数は、 <store-temp>\packages\libs\styles\src\styles\typography\_variables.scss にあります。

既存の SCCS 変数をオーバーライドするには、以下のステップを実行します。

変更するアプリケーション提供の SCSS 変数名を識別します。
アプリケーション提供の SCSS 変数名は、 <store-temp>\packages\libs\styles\src\styles\typography\_variables.scssにあります。
適切な変数名を <store-temp>\extensions\libs\styles\src\styles\variables_extn.scss ファイルにコピーし、必要に応じて適切な値を指定します。
変更内容を確認します。
次のコマンドを実行してアプリケーションを起動します
```
yarn start-app
```
デベロッパーズ・ツールキットでの変更を確認するには、カスタマイズを抽出してデプロイします。カスタマイズの抽出と展開の詳細については、カスタマイズの抽出を参照してください。

サンプル・コード・スニペット。


/* Overridding gray colour */
$gray-10: #2d74da;
$gray-10-15: #2d74da;

カスタムアイコンフォントの作成

カスタムアイコンフォントについては、サードパーティのアイコンライブラリを直接使用するか、以下の手順を完了してカスタムアイコンを作成することができます

任意のツールを使用してベクター形式のカスタムアイコンを作成するか、 .svg ファイル形式を生成するか、または他のソースから .svg ファイルを入手します。
作成した .svg ファイルを使用し、任意のSVGアイコンライブラリを使用してカスタムアイコンフォントを生成します。
注:
- .png または .jpg ファイルから変換された .svg ファイルは使用しないでください。
- フォントアイコンを生成する際には、アプリケーションが提供する app-glyphicons フォント名を使用しないでください。代わりに、カスタムフォント名を使用してください。
<store-temp>\extensions\libs\styles\src\styles\icons フォルダ内に新しいフォルダを作成し、生成されたアイコンフォント形式（ .ttf 、 .svg 、 .eot 、 .woff など）をすべて、サードパーティのカスタムアイコンSCSSまたはCSSファイルを含めて、このフォルダにコピーします。
カスタムアイコンフォントを <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss ファイルにインポートします。
例: @import './icons/style.scss';
カスタムコンポーネントでは、カスタムアイコンクラスセレクタを使用します。
変更内容を確認します。
次のコマンドを実行してアプリケーションを起動します
```
yarn start-app
```
デベロッパーズ・ツールキットでの変更を確認するには、カスタマイズを抽出してデプロイします。カスタマイズの抽出と展開の詳細については、カスタマイズの抽出を参照してください。

カスタム・イメージの追加

カスタム・コンポーネント画面で使用するカスタム・イメージを追加するには、以下の手順を実行します。

<store-temp>\extensions\libs\styles\src\styles\images ディレクトリーに新規イメージを追加できます。
拡張ライブラリに新しい画像を追加した後、HTML、SCSS、XSLなどのソースコードファイルにカスタム画像を追加するには、 /assets/styles/images/custom-image.jpeg などの相対パスを使用します。例えば、 <img src=“./assets/styles/images/sterling_login_dark_custom.svg”>のようになります。

注: 新しいクラス名が既存の CSS クラス名と競合しないようにしてください。
変更内容を確認します。
次のコマンドを実行してアプリケーションを起動します
```
yarn start-app
```
デベロッパーズ・ツールキットでの変更を確認するには、カスタマイズを抽出してデプロイします。カスタマイズの抽出と展開の詳細については、カスタマイズの抽出を参照してください。

拡張コンポーネントでカスタム画像を使用する

カスタム画像を追加すると、画像を含むアセットがアプリケーションのルートにコピーされます。環境のタイプ、開発または本番に基づいて、アセットはランタイムの異なる場所で利用可能である。本番環境では、イメージは <store-temp>/dist/store-frontend/assets/styles/images にコピーされる。そうでない場合は、ルート・アプリケーションに相対するassetsディレクトリのメモリー上で利用可能です。

カスタムイメージをロードするプロセスは、環境のタイプによって異なります。カスタム画像を読み込むには、以下の手順に従います：

コンポーネントのtypescriptファイルで、angularコアから isDevMode 、 '@angular/core'。例:
```
import { Component, OnInit, ViewEncapsulation, OnDestroy, isDevMode } from '@angular/core';
```
イメージ URL を保持する変数を公開し、特定の環境タイプ用に設定する。以下のコマンドを実行すると、アプリケーションは開発モードでビルドされる。
```
yarn start-app
```
以下のコマンドを実行すると、アプリケーションは本番モードでビルドされます。
```
yarn build-extensions
```
例えば、 extensions\libs\styles\src\styles\images\custom_image.jpg ファイルをロードするには、コンポーネントの ngOnInit() に、コンポーネントの HTML ファイルで使用する必要がある画像 URL を保持するために、以下のコード・スニペットを追加します。
```
if (isDevMode()) {

     this.imageUrl = "assets/styles/images/custom_image.jpg"

   } else {

     this.imageUrl = "../extn/store-frontend/assets/styles/images/custom_image.jpg";

   }
```
コンポーネントのHTMLファイルで、画像 URL を image 要素にバインドします。次の例は、 src 属性のバインディングを示しています。
<img [src]="imageUrl" alt="" width="50" height="50">

カスタム SCSS セレクターの追加

カスタム機能用の新規グローバル・セレクターを定義するには、以下の手順を実行します。

カスタム CSS セレクターは、 <store-temp>\extensions\libs\styles\src\styles\custom_styles.scssで定義できます。

注: カスタム CSS セレクターが既存のセレクターと競合しないようにしてください。
他の SCCS ファイルを <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss ファイルにインポートします。
変更内容を確認します。
次のコマンドを実行してアプリケーションを起動します
```
yarn start-app
```
デベロッパーズ・ツールキットでの変更を確認するには、カスタマイズを抽出してデプロイします。カスタマイズの抽出と展開の詳細については、カスタマイズの抽出を参照してください。