liferayliferay-themeliferay-7

Liferay 7 Theme-Generator: Setting parent theme (baseTheme)


I have used the theme-generator to create a fresh theme. Now I've created a second theme in the same directory and tried to set it's base/parent theme using gulp extend as explained on these pages:

https://github.com/liferay/liferay-theme-tasks https://dev.liferay.com/de/develop/reference/-/knowledge_base/7-0/theme-gulp-tasks

After running the command and choosing option 1) to extend the Base Theme , I get the following options:

  1. Styled
  2. Unstyled
  3. Search globally installed npm modules (development purposes only)
  4. Search npm registry (published modules)

No matter if I choose 3) or 4) I cannot find the theme package.

Do I really have to publish the theme to npm to be able to find it?


Solution

  • Following this explanation I could achieve it using npm link:

    Excerpt:

    npm link: symbolic links to the rescue Fortunately npm provides a tool to avoid this tedium. And it's easy to use. But there's a catch.

    Here's how it's supposed to work:

    1. cd to src/appy

    2. Run "npm link". This creates a symbolic link from a global folder to the src/appy folder.

    3. cd to src/mysite

    4. Run "npm link appy". This links "node_modules/appy" in this particular project to the global folder, so that "require" calls looking for appy wind up loading it from your development folder, src/appy.

    Mission accomplished... almost. If you installed Node in a typical way, using MacPorts or Ubuntu's apt-get, then npm's "global" folders are probably in a location shared system-wide, like /opt/local/npm or /usr/lib/npm. And this is not good, because it means those "npm link" commands are going to fail unless you run them as root.

    EDIT: I was wrong to make a npm package out of it when you can also just require it locally. Even relative paths work. Example:

    "dependencies": {
        "my-liferay-theme": "file:../My-Liferay-theme",
    }