UI5 CLI extension for compiling less files

:wave: This is an open‑source, community‑driven project, developed and actively monitored by members of the UI5 community. You are welcome to use it, report issues, contribute enhancements, and support others in the community.

The project includes a task for ui5-builder, enabling compiling of less files in your app folder, and a middleware for ui5-server, live compiling less files.

Prerequisites

• Requires at least @ui5/[email protected] (to support specVersion: "3.0")

:warning: UI5 CLI Compatibility All releases of this UI5 CLI extension using the major version 3 require UI5 CLI V3. Any previous releases below major version 3 (if available) also support older versions of the UI5 CLI. But the usage of the latest UI5 CLI is strongly recommended!

Install

npm install ui5-tooling-less --save-dev

Configuration options (in $yourapp/ui5.yaml)

• debug: true|false
  verbose logging

• lessToCompile String<Array> (task relevant only) array of less resources specified as paths or glob patterns which should be compiled

Usage

1. Define the dependency in $yourapp/package.json:

"devDependencies": {
    // ...
    "ui5-tooling-less": "*"
    // ...
}

2. configure it in $yourapp/ui5.yaml:

The configuration for the custom task:

builder:
  customTasks:
    - name: ui5-tooling-less-task
      afterTask: replaceVersion

The configuration for the custom middleware:

server:
  customMiddleware:
    - name: ui5-tooling-less-middleware

How it works

The UI5 CLI extension can be used to compile less files in your app folder by using less-openui5.

It can also include less file from UI5 library dependencies (framework and custom ones), e.g.:

@import "/resources/sap/ui/core/themes/base/base.less";

To get all the less variable that are defined in the sap ui theme core, or, e.g.:

@import "/resources/ui5/ecosystem/showcase/lib/css/variables.less";

Important is that every less resources imported from outside the application project must use the runtime path (e.g. /resources/%project_namespace%/...) and all local less files can be imported with relative paths (e.g. ./base/base.less).

The task derives the available less files from the manifest (section: sap.ui5/resources/css) unless you specify a glob pattern in the task configuration to include e.g. all less resources:

builder:
  customTasks:
    - name: ui5-tooling-less-task
      afterTask: replaceVersion
      configuration:
        lessToCompile:
          - "**/*.less" # "css/style.less"

:information_source: The css file corresponding to your less file needs to be maintained in the manifest as described here.

License

This work is dual-licensed under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0 but finally you can choose between one of them if you use this work.

When you like this stuff, buy @sebbi a beer or buy @marcel_schork a coke when you see them.