Wondering what’s next for npm?Check out our public roadmap! »


1.1.6 • Public • Published


Compile ZK Themes using the lesscss compiler.

Install / Run

Requires node >=10.16

Use globally

npm install zkless-engine -g
zklessc [params]

Use locally (add to package.json)

npm install zkless-engine --save-dev
npx zklessc [params]

Available parameters

param description default/value
-s/--source source folder to compile/watch src/main/resources/web
-o/--output output folder for .css.dsp files target/classes/web
-c/--compress minify output files false (optional)
-i/--imports specify multiple folders for @import resolution - (optional/multiple)
--less-opts json string with custom less options {}
-w/--watch watch files after successful compile false (optional)
--live-reload-port port for live reloading server 50000 (optional)



Compile a custom zktheme cloned from zk theme template project:

(1) long params, (2) shortcut params and watch, (3) and compress

    zklessc --source src/archive/web --output target/classes/web/mytheme
    zklessc -s src/archive/web -o target/classes/web/mytheme -w
    zklessc -s src/archive/web -o target/classes/web/mytheme -cw

Include external folders into build

See less include paths

Assume the folder structure:

- mytheme 
  - src/archive/web/js/zul/wgt/button/less
    - button.less
    - _mybutton.less
- 3rdparty
  - amazingtool
    - shapes.less
- styleguide
  - corporatecolors.less

By executing the command ...

zklessc -s src/archive/web -o target/classes/web/mytheme -i ../3rdparty -i ../styleguide

... less will find @imports based on those folders as well


@import "/zul/less/_header.less"; /*absolute import based on source directory (-s)*/
/*omitted zk styles*/
/*your imports*/
@import "_mybutton.less"; /*relative import*/


@import "/amazingtool/shapes.less"; /*will be found below "-i ../3rdparty"*/
@import "/corporatecolors.less"; /*will be found below "-i ../styleguide"*/
/*my styles*/
.z-button {
    color: @corporateGreen; /* using a variable from corporatecolors.less */

Maven integration

Since zklessc is a plain command line tool it can be integrated into a maven build using the standard exec-maven-plugin.

e.g. run zklessc during the process-resources phase:

    <!-- handle class web resources separately below -->
    <!-- copy non-less into theme folder (here artifactId == theme name), 
    less files will be handled by plugin below -->

Then execute directly via:

mvn process-recources

or build the project normally

mvn clean package

Gradle usage

Call the same command from an Exec-task

Live Reloading (during development)

When --watch is enabled an http server is automatically started on port 50000 (or --live-reload-port).

By adding the following scripts to your zk application (zul page or globally) the page will be notified about zkless compile results.

    <script src="http://localhost:50000/socket.io/socket.io.js"/>
    <script src="http://localhost:50000/zklessLiveReloadStyles.js"/>
    <!--<script src="http://localhost:50000/zklessLiveReloadStylesResize.js"/>-->
    <!--<script src="http://localhost:50000/zklessLiveReloadPage.js"/>-->

You have to add the socked.io client script provided by the server. Besided that there are 3 options for different behaviour.

zklessLiveReloadStyles.js -> reload only stylesheets after compliation

zklessLiveReloadStylesResize.js -> reload stylesheets and call zUtl.fireSized (useful when changing paddings/margins)

zklessLiveReloadPage.js -> reload the whole page


npm i zkless-engine

DownloadsWeekly Downloads






Unpacked Size

16.7 kB

Total Files


Last publish


  • avatar