在前端开发中，CSS 非常重要。而使用 less 这样的样式预处理器则能够更加高效地编写 CSS。但是，如果每次修改 less 文件后都需要手动编译为 CSS 文件，那么就会很麻烦。这时候，使用 npm 包 less-watch-cli 就能够解决这个问题，它能够监听 less 文件的变化并自动编译为 CSS 文件，从而节省了手动编译的时间。
安装
使用 npm 安装 less-watch-cli：
npm install -g less-watch-cli
使用
- 打开命令行窗口，进入 less 文件所在的目录：
cd /path/to/less/dir
- 运行 less-watch 命令：
less-watch
这时候，less-watch-cli 就会监听 less 文件的变化。每次 less 文件被更改，less-watch-cli 就会自动编译为 CSS 文件。
- 在 HTML 文件中使用编译后的 CSS 文件：
<link href="style.css" rel="stylesheet">
高级选项
除了基本的使用方法，less-watch-cli 还提供了一些高级选项来满足不同的需求。
监听目录
默认情况下，less-watch-cli 会监听运行命令所在的目录下的所有 less 文件。如果需要监听指定目录下的 less 文件，可以使用 --path 参数来指定：
less-watch --path /path/to/less/dir
输出目录
默认情况下，编译后的 CSS 文件会和 less 文件保存在同一目录下。如果需要将编译后的 CSS 文件保存在指定目录下，可以使用 --output 参数来指定：
less-watch --output /path/to/css/dir
压缩 CSS
默认情况下，less-watch-cli 编译的 CSS 文件是未压缩的。如果需要压缩 CSS，可以使用 --compress 参数：
less-watch --compress
示例代码
下面是一个使用 less-watch-cli 的示例。假设有一个项目目录，其中的 less 文件位于 src/less 目录下。安装好 less-watch-cli 后，在命令行中进入项目根目录，运行以下命令：
less-watch --path src/less/ --output src/css/
这时候，less-watch-cli 会自动编译 src/less 目录下的所有 less 文件，并将编译后的 CSS 文件保存在 src/css 目录下。在 HTML 文件中使用编译后的 CSS 文件：
<link href="src/css/style.css" rel="stylesheet">
这样，每次修改 less 文件后，CSS 文件就会自动更新，从而让开发流程更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc395