Liferay 7.4でのBootstrap 3互換性レイヤーの使用
Liferay DXP 7.4 GA1 以降、Liferay フロントエンドアプリケーションの組み込みパッケージから Bootstrap 3 互換性レイヤーが削除されました。 以前のバージョンからアップグレードする場合、CSSコードを Bootstrap 3に依存しているプロジェクトには、外部パッケージとして互換性レイヤーを含める必要があります。
gulp upgrade コマンドを使用して テーマを Liferay 7.4 にアップグレード すると、アップグレード時に Bootstrap 3 互換性レイヤーを自動的に含めることができます。 この場合、そのテーマに手動で互換性レイヤーを追加する必要はありません。
Bootstrap 3互換性レイヤーは、Liferay 7.4 GA1へのアップグレードをよりスムーズに行うために、外部パッケージとしてのみ提供しています。 それ以降のバージョンでは動作しないようになっているので、早めに交換した方がよいでしょう。
互換性レイヤーのインストール
次のコマンドを実行して、互換性レイヤーを外部パッケージとしてインストールし、プロジェクトで使用できるようにします。
npm install @liferay/bs3-bs4-compat
また、下記コマンドを実行すると、Yarnを使用してインストールすることができます。
yarn add @liferay/bs3-bs4-compat
一度互換性レイヤーをインストールすれば、Bootstrap 3との互換性が必要なプロジェクトで使用することができます。
プロジェクトで互換性レイヤーを使用する
互換性レイヤーを使用するには、それをプロジェクトの clay.scss ファイルにインポートする必要があります ( 7.4 へのアップグレードの一部として既にそれが含まれているテーマの場合は除きます)。
atlasテーマの変数が必要な場合は、これをプロジェクトの src/css/clay.scssファイルに追加してください。
@import 'clay/atlas';
@import '@liferay/bs3-bs4-compat/scss/variables';
@import '@liferay/bs3-bs4-compat/scss/atlas_variables';
@import '@liferay/bs3-bs4-compat/scss/components';
atlasテーマ変数を必要としない場合は、代わりに以下をプロジェクトのsrc/css/clay.scssファイルに追加してください。
@import 'clay/base';
@import '@liferay/bs3-bs4-compat/scss/variables';
@import '@liferay/bs3-bs4-compat/scss/components';
Bootstrap 3互換性レイヤーがテーマに含まれるようになり、Liferay DXP 7.4 GA1で機能するようになりました。 次の作業は、プロジェクトのコードを変更して、Bootstrap 3 への依存を解消することです。