カスタマイズ コードへのカスタム リソースの追加
この記事では、フォント、画像、カスケード スタイル シート (CSS) ファイルなどのカスタム静的リソースをソフトウェア開発キット (SDK) のカスタマイズ コードに追加して、テーマ内からアクセスする方法について説明します。
シナリオによっては、モジュールまたはテーマ内からアクセスできるフォント、画像、CSS ファイルなどのカスタム静的リソースを追加する必要があります。 これらの静的ファイルは、SDK カスタマイズ コード内の/public フォルダーに追加して、CLI yarn msdyn365 pack コマンドで生成されたコンフィギュレーション パッケージに含めることができます。 相対パスを使用してリソースにアクセスできます。
ビルド ステップでは、スタイル サッシー CSS (SCSS) ファイルが CSS ファイルにコンパイルされ、同じ /public フォルダー内に格納されます。これは、/public フォルダー内の他の静的リソースを参照するときに考慮する必要があります。
例
リソースは、/public ディレクトリ、またはこのディレクトリの下の任意のサブディレクトリに追加できます。 たとえば、"NewIot-Regular" というフォントを追加すると、"NewFont-Regular.eot"、"NewFont-Regular.woff"、"NewFont-Regular.ttv"、および "NewFont-Regular.svg" などの複数のフォント ファイルが /public ディレクトリに追加される場合があります。
ファイルを /public ディレクトリに追加した後、サッシー CSS (SCSS) ファイル内の相対パスを使用してそれらを指すことができます。 次の SCSS の例は、/src/themes/spring フォルダーにあるテーマから取得したものです。 コマンドライン インターフェイス (CLI) コマンド パックを使用すると、SCSS コードは /build/public/static/css/spring ディレクトリに作成された ZIP ファイルにコンパイルされます。 次に、相対パスを使用して /public フォルダー内のフォントにアクセスします。
@import "bootstrap/scss/bootstrap";
@font-face {
font-family: 'NewRocker-Regular';
src: url('../../../NewFont-Regular.eot');
src: url('../../../NewFont-Regular.eot?#iefix') format('embedded-opentype'),
url('../../../NewFont-Regular.woff') format('woff'),
url('../../../NewFont-Regular.ttf') format('truetype'),
url('../../../NewFont-Regular.svg#NewFont-Regular') format('svg');
}
body {
font-family: 'NewFont-Regular', Fallback, sans-serif;
}
パブリック パスへの動的アクセス
Microsoft Lifecycle Services (LCS) を使用して E コマースのカスタマイズを配置すると、/public ディレクトリに保存されているファイルへの物理的なパスが変更されるため、コード内からこれらのファイルへの静的な物理パスを指定することはできません。 ただし、パスを取得するのに役立つ getAsset というヘルパー API があります。
次のカスタム モジュール .tsx ファイルの例は、getAsset API を使用して /public/webfonts ディレクトリに保存されているフォント ファイルに URL を生成する方法を示しています。
import { getAsset } from '@msdyn365-commerce/core';
const url = `${getAsset('webfonts/fa-solid-900.woff', this.props.context.request)}`;