モジュールのJavaScriptとCSSの変更が表示されないのはなぜですか?

モジュールへのJavaScriptおよびCSSの更新がブラウザに反映されない理由を判断するには、次のチェックを実行します。

  1. ポートレットモジュールを開発している場合は、ポートレットクラスの@Componentアノテーションに正しいプロパティが指定されていることを確認します。

    • ポートレットクラスの@Componentアノテーションのプロパティによって参照されるリソースが、モジュールプロジェクトの正しい場所に存在することを確認します。

    • ポートレットCSSラッパークラスを使用して、ページ上の他のアプリケーションとの潜在的なCSS IDおよびクラス名の競合が回避されていることを確認します。 たとえば、次のサンプルのポートレットクラスについて考えます。

      @Component( immediate = true, property = { “com.liferay.portlet.css-class-wrapper=example-portlet”, “com.liferay.portlet.display-category=category.sample”, “com.liferay.portlet.instanceable=true”, “com.liferay.portlet.header-portlet-css=/css/main.css”, “com.liferay.portlet.header-portlet-js=/css/main.js”, “javax.portlet.display-name=Example Portlet”, “javax.portlet.init-param.template-path=/”, “javax.portlet.init-param.view-template=/view.jsp”, “javax.portlet.name=” + ExamplePortletKeys.TicTacToe, “javax.portlet.resource-bundle=content.Language”, “javax.portlet.security-role-ref=power-user,user” }, service = Portlet.class ) public class ExamplePortlet extends MVCPortlet {

      }

    上記の最初の項目で説明したように、ポートレットのCSSファイルはプロパティcom.liferay.portlet.header-portlet-cssによって指定されます。このプロパティの値として指定されたパスは、モジュールのsrc/main/resources/META-INF/resourcesフォルダに対応しています。したがって、css/main.cssの値を指定した場合、モジュール内のCSSファイルへの実際のパスはsrc/main/resources/META-INF/resources/css/main.cssとなります。ポートレットのJavaScriptファイルへのパスは、プロパティcom.liferay.portlet.header-portlet-jsによって指定されます。このプロパティの値は、CSSプロパティの値と同じように機能します。

    プロパティcom.liferay.portlet.css-class-wrapperがCSSクラスラッパーexample-portletを指定していることにも注意してください。したがって、ポートレットの実際のCSSファイルでexample-portletのサブクラスを使用する必要があります。たとえば、main.cssで、以下を実行して背景を緑に変更します。

    .example-portlet {
    .greenBackground {
    background-color: green;
    }
    
    ... (further properties)
    
    }
    

    つまり、CSSクラスとID名の競合を回避するには、指定するすべてのCSSプロパティがcom.liferay.portlet.css-class-wrapperプロパティで指定されたクラスのサブクラスである必要があります。Liferay DXPは、ポートレットのHTMLコンテンツを<div>でラップします。com.liferay.portlet.css-class-wrapper(この例ではexample-portlet)で指定されたクラスは、この<div>に適用されています。

  2. キャッシュにより、モジュールへのJSおよびCSSの更新がブラウザに表示されなくなっていないことを確認します。

    • ブラウザのキャッシュをクリアします。
    • 開発中に、開発者モードを有効にして、Liferay DXPのリソースキャッシングをオフにします。 Liferay DXPの開発者モードを有効にする方法については、こちらをクリックしてください。

関連トピック

Using Developer Mode with Themes

« オプションのインポートパッケージ要件の宣言フラグメントを使用して行ったJSPオーバーライドが表示されないのはなぜですか? »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています