1 | # lessc-watch
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/lessc-watch)](https://www.npmjs.com/package/lessc-watch)
|
4 | [![install size](https://packagephobia.now.sh/badge?p=lessc-watch)](https://packagephobia.now.sh/result?p=lessc-watch)
|
5 | [![npm downloads](https://img.shields.io/npm/dm/lessc-watch.svg)](https://npm-stat.com/charts.html?package=lessc-watch)
|
6 |
|
7 | Watch for file changes and compile [less](https://lesscss.org/usage) files into a single css bundle file.
|
8 |
|
9 | ## Getting started
|
10 |
|
11 | ```sh
|
12 | # Install `lessc-watch` as a dev dependency locally.
|
13 | npm i lessc-watch --save-dev
|
14 |
|
15 | # Watch the `src` directory and build `src/index.less`
|
16 | # (and all its dependencies) to `dist/bundle.less`.
|
17 | # Set the `rewrite-urls` option of less to `all`.
|
18 | npx lessc-watch src/index.less dist/bundle.css -ru=all -d=src
|
19 |
|
20 | # Build `src/index.less` to `dist/bundle.css` and exit without watching.
|
21 | npx lessc-watch src/index.less dist/bundle.css -ru=all --build
|
22 |
|
23 | # Using config file
|
24 | npx lessc-watch -f ./config.json
|
25 | # or
|
26 | npx lessc-watch --config ./config.json
|
27 | ```
|
28 |
|
29 | ## Command options
|
30 |
|
31 | ```txt
|
32 | COMMAND
|
33 | lessc-watch <entry_file> <output_file> [options ...]
|
34 |
|
35 | EXAMPLE
|
36 | lessc-watch src/index.less dist/bundle.css -d=src -ru=all
|
37 | lessc-watch -f ./config.json
|
38 | lessc-watch --config ./config.json
|
39 |
|
40 | OPTIONS
|
41 | --watch-dir, -d The directory to watch (default to "./").
|
42 |
|
43 | --rewrite-urls, -ru The option of less "rewrite-urls".
|
44 |
|
45 | --global-vars Set less global variables (separated by comma).
|
46 | Example 1: --global-vars=prefix=my-ui
|
47 | Example 2: --global-vars=color1=red,color2=blue
|
48 |
|
49 | --config, -f Specify the path of the config file.
|
50 | Please note that the path of the file or directory
|
51 | in the config file is relative to the path of the
|
52 | config file.
|
53 |
|
54 | --ext The extra file extensions to watch (separated
|
55 | by comma). The base extensions are .less, .css,
|
56 | .svg, .png, .jpg, .jpeg, .gif, .webp and .bmp.
|
57 | You can use this option to add more.
|
58 |
|
59 | --build Build less to css without watching for the
|
60 | file changes.
|
61 |
|
62 | --delay The milliseconds to delay before building
|
63 | (default to 0).
|
64 |
|
65 | --quiet, -q Disable all logs (not including error message).
|
66 |
|
67 | --help, -h Print this message.
|
68 | ```
|
69 |
|
70 | ## Programmatic usage
|
71 |
|
72 | ```js
|
73 | const { resolve } = path
|
74 | const { watch } = require('lessc-watch')
|
75 |
|
76 | watch({
|
77 | entry: resolve(__dirname, './src/index.less'),
|
78 | output: resolve(__dirname, './dist/bundle.css'),
|
79 | watchDir: resolve(__dirname, './src'),
|
80 | lessOptions: {
|
81 | rewriteUrls: 'all',
|
82 | globalVars: {
|
83 | prefix: 'myui'
|
84 | }
|
85 | }
|
86 | })
|
87 | ```
|
88 |
|
89 | The options to `watch(options: LesscWatchOptions)` method is:
|
90 |
|
91 | ```ts
|
92 | interface LesscWatchOptions {
|
93 | entry: string
|
94 | output: string
|
95 | watchDir?: string
|
96 | extraWatchExtensions?: string[]
|
97 | delay?: number
|
98 | quiet?: boolean
|
99 | build?: boolean
|
100 | lessOptions?: LessOptions
|
101 | watchOptions?: WatchOptions
|
102 | }
|
103 | ```
|
104 |
|
105 | ## Example config.json
|
106 |
|
107 | ```json
|
108 | {
|
109 | "entry": "./src/index.less",
|
110 | "output": "./dist/bundle.css",
|
111 | "watchDir": "./src",
|
112 | "lessOptions": {
|
113 | "rewriteUrls": "all",
|
114 | "globalVars": {
|
115 | "prefix": "myui"
|
116 | }
|
117 | }
|
118 | }
|
119 | ```
|
120 |
|
121 | > Please note that the path of the file or directory in the config file is relative to the path of the config file.
|
122 |
|
123 | ## Feedback
|
124 |
|
125 | Any feedback is welcome. Please feel free to [file an issue](https://github.com/john-yuan/lessc-watch/issues/new).
|
126 |
|
127 | ## License
|
128 |
|
129 | [MIT](https://github.com/john-yuan/lessc-watch/blob/main/LICENSE)
|