Error in plugin "sass" when migrating themes "... is deprecated and will be removed in Dart Sass 2.0.0."

問題

テーマを新しいバージョンに移行すると、次のタイプのエラーが発生する可能性があります。

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
737 │ $navbar-padding-y:                  $spacer / 2 !default;
    │                                     ^^^^^^^^^^^
    ╵
    build/_css/clay/bootstrap/_variables.scss 737:37  @import
    build/_css/clay/bootstrap/bootstrap.scss 9:9      @import
    build/_css/clay/base.scss 7:9                     @import
    build/_css/clay.scss 1:9                          root stylesheet

[09:24:43] 'build:compile-css' errored after 2.92 s
[09:24:43] Error in plugin "sass"
Message:
    build/_css/compat/components/_dropdowns.scss
Error: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
See http://bit.ly/ExtendCompound for details.

   ╷
29 │         @extend .dropdown-item.disabled;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^

Environment

DXP7.0以上

解決策

これは、DXP 7.4 ではノード 16.13.0 を使用する必要があるためです。記事の互換性マトリックスとして、Liferay NPM Toolkit 互換性マトリックスには Gulp 4 が必要です。
gulp 4 が機能するには、"liferay-theme-tasks": "^10.xx" または最新の "11.xx" ( liferay-themes-toolkitを参照) を使用する必要があります。 DART SASS を使用します。
そのため、古いテーマをビルドできるようにするには、DART SASS を無効にする必要があります ( liferay-theme-tasks#disabling-dart-sassを参照)。

DART SASS を無効にするには、これを package.json に追加する必要があります。

{
	"liferayTheme": {
		"sassOptions": {
			"dartSass": false
		}
	},
	"devDependencies": {
		"node-sass": "7.0.1"
	}
}

その結果、DXP 7.4 の最新のテーマを使用した package.json の依存関係 ( liferay-theme-tasks#get-the-right-dependency-version-for-your-themeを参照) は次のようになります。

{
	"liferayTheme": {
		"baseTheme": "styled",
		"screenshot": "",
		"templateLanguage": "ftl",
		"version": "7.4",
		"sassOptions": {
			"dartSass": false
		}
	},
	"devDependencies": {
		"compass-mixins": "0.12.10",
		"gulp": "4.0.2",
		"liferay-font-awesome": "3.5.2",
		"liferay-frontend-css-common": "6.0.5",
		"liferay-frontend-theme-styled": "^6.0.51",
		"liferay-frontend-theme-unstyled": "^6.0.44",
		"liferay-theme-tasks": "^11.4.0",
		"node-sass": "7.0.3"
	}
  }

結果を確認するには、 npm install および gulp deploy を実行する必要があります (これには guld buildが含まれます)。
新しく生成されたテーマを展開した後に結果や変更が表示されない場合は、ブラウザーのキャッシュ (ブラウザーごとに方法があります) と、コントロールパネルからポータルのキャッシュをクリアします。 > サーバー管理 > 実行 この VM によってキャッシュされたコンテンツをクリアします および クラスター全体でキャッシュされたコンテンツを消去します (詳細については、以下を確認してください: サーバー管理リソース)

テーマを移行する際のプラグイン「sass」のエラー「... is deprecated and will be removed in Dart Sass 2.0.0.」

問題

Environment

解決策