Why Aren't my Module's JavaScript and CSS Changes Showing?

To determine why JavaScript and CSS updates to your module aren’t having an effect in your browser, perform these checks:

  1. If you’re developing a portlet module, check that your portlet class has the correct properties specified in its @Component annotation:

    • Make sure the resources referred to by the properties of your portlet class’s @Component annotation exist in the correct location in your module project.
    • Make sure that you’re using a portlet CSS wrapper class to prevent potential CSS ID and class name conflicts with other applications on the page.

    For example, consider this sample portlet class:

        immediate = true,
        property = {
            "javax.portlet.display-name=Example Portlet",
            "javax.portlet.name=" + ExamplePortletKeys.TicTacToe,
        service = Portlet.class
    public class ExamplePortlet extends MVCPortlet {

    As described in the first item above, the portlet’s CSS file is specified by the property com.liferay.portlet.header-portlet-css. Paths specified as values of this property are relative to the module’s src/main/resources/META-INF/resources folder. So if you specify a value of css/main.css, the actual path to the CSS file in the module is src/main/resources/META-INF/resources/css/main.css. The path to your portlet’s JavaScript file is specified by the property com.liferay.portlet.header-portlet-javascript. Values for this property work the same as the values for the CSS property.

    Also note that the property com.liferay.portlet.css-class-wrapper specifies the CSS class wrapper example-portlet. Thus, you should use subclasses of example-portlet in your portlet’s actual CSS file. For example, in main.css you’d do this to change the background to green:

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

    In other words, to avoid CSS class and ID name conflicts, all the CSS properties you specify must be subclasses of the class specified via the com.liferay.portlet.css-class-wrapper property. Liferay DXP wraps your portlet’s HTML content with a <div>. The class specified by com.liferay.portlet.css-class-wrapper (example-portlet, in this example) has been applied to this <div>.

  2. Check that caching isn’t preventing JS and CSS updates to your module from appearing in your browser:

    • Clear your browser’s cache.
    • During development, enable developer mode to turn off Liferay DXP’s resource caching. Click here to learn how to enable Liferay DXP’s developer mode.

Using Developer Mode with Themes

« Declaring Optional Import Package RequirementsWhy Aren't JSP overrides I Made Using Fragments Showing? »
Este artigo foi útil?
Utilizadores que acharam útil: 0 de 0