lessc-watch
v1.2.0
Published
Watch for file changes and compile less files into a single css bundle file.
Downloads
264
Readme
lessc-watch
Watch for file changes and compile less files into a single css bundle file.
Getting started
# 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
COMMAND
lessc-watch <entry_file> <output_file> [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
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:
interface LesscWatchOptions {
entry: string
output: string
watchDir?: string
extraWatchExtensions?: string[]
delay?: number
quiet?: boolean
build?: boolean
lessOptions?: LessOptions
watchOptions?: WatchOptions
}
Example config.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.