lessc-watch


Watch for file changes and compile less files into a single css bundle file.

Getting started

``sh


Install lessc-watch as a dev dependency locally.

npm i lessc-watch --save-dev

Watch the src directory and build src/index.less




(and all its dependencies) to dist/bundle.less.




Set the rewrite-urls option of less to all.

npx lessc-watch src/index.less dist/bundle.css -ru=all -d=src

Build src/index.less to dist/bundle.css and exit without watching.

npx lessc-watch src/index.less dist/bundle.css -ru=all --build

Using config file

npx lessc-watch -f ./config.json

or

npx lessc-watch --config ./config.json
`

Command options

`txt
COMMAND
lessc-watch [options ...]

EXAMPLE
lessc-watch src/index.less dist/bundle.css -d=src -ru=all
lessc-watch -f ./config.json
lessc-watch --config ./config.json

OPTIONS
--watch-dir, -d The directory to watch (default to "./").

--rewrite-urls, -ru The option of less "rewrite-urls".

--global-vars Set less global variables (separated by comma).
Example 1: --global-vars=prefix=my-ui
Example 2: --global-vars=color1=red,color2=blue

--config, -f Specify the path of the config file.
Please note that the path of the file or directory
in the config file is relative to the path of the
config file.

--ext The extra file extensions to watch (separated
by comma). The base extensions are .less, .css,
.svg, .png, .jpg, .jpeg, .gif, .webp and .bmp.
You can use this option to add more.

--build Build less to css without watching for the
file changes.

--delay The milliseconds to delay before building
(default to 0).

--quiet, -q Disable all logs (not including error message).

--help, -h Print this message.
`

Programmatic usage

`js
const { resolve } = path
const { watch } = require('lessc-watch')

watch({
entry: resolve(__dirname, './src/index.less'),
output: resolve(__dirname, './dist/bundle.css'),
watchDir: resolve(__dirname, './src'),
lessOptions: {
rewriteUrls: 'all',
globalVars: {
prefix: 'myui'
}
}
})
`

The options to watch(options: LesscWatchOptions) method is:

`ts
interface LesscWatchOptions {
entry: string
output: string
watchDir?: string
extraWatchExtensions?: string[]
delay?: number
quiet?: boolean
build?: boolean
lessOptions?: LessOptions
watchOptions?: WatchOptions
}
`

Example config.json

`json
{
"entry": "./src/index.less",
"output": "./dist/bundle.css",
"watchDir": "./src",
"lessOptions": {
"rewriteUrls": "all",
"globalVars": {
"prefix": "myui"
}
}
}
``

> Please note that the path of the file or directory in the config file is relative to the path of the config file.

Feedback

Any feedback is welcome. Please feel free to file an issue.

License

MIT