我已经安装了 node 和 npm。使用 npm 我下载了 less。
当我这样做的时候
lessc styles.less styles.css -x -w
在终端中,它会编译和压缩代码,但不会监视文件的变化,因为我希望 LESS 自动编译并自动刷新页面。因此,如果我对 style.less 进行任何更改,每次我都必须转到终端并输入命令来编译 less css。
此外,编译器甚至没有显示任何编译错误。
请指导我如何实现上述目标。这是我使用 LESS CSS 的第一天。
答案1
简单来说,这个-w
论点不存在。
$ lessc --help
usage: lessc [option option=parameter ...] <source> [destination]
If source is set to `-' (dash or hyphen-minus), input is read from stdin.
options:
-h, --help Print help (this message) and exit.
--include-path=PATHS Set include paths. Separated by `:'. Use `;' on Windows.
-M, --depends Output a makefile import dependency list to stdout
--no-color Disable colorized output.
--no-ie-compat Disable IE compatibility checks.
-l, --lint Syntax check only (lint).
-s, --silent Suppress output of error messages.
--strict-imports Force evaluation of imports.
--verbose Be verbose.
-v, --version Print version number and exit.
-x, --compress Compress output by removing some whitespaces.
--yui-compress Compress output using ycssmin
--max-line-len=LINELEN Max line length used by ycssmin
-O0, -O1, -O2 Set the parser's optimization level. The lower
the number, the less nodes it will create in the
tree. This could matter for debugging, or if you
want to access the individual nodes in the tree.
--line-numbers=TYPE Outputs filename and line numbers.
TYPE can be either 'comments', which will output
the debug info within comments, 'mediaquery'
that will output the information within a fake
media query which is compatible with the SASS
format, and 'all' which will do both.
-rp, --rootpath=URL Set rootpath for url rewriting in relative imports and urls.
Works with or without the relative-urls option.
-ru, --relative-urls re-write relative urls to the base less file.
-sm=on|off Turn on or off strict math, where in strict mode, math
--strict-math=on|off requires brackets. This option may default to on and then
be removed in the future.
-su=on|off Allow mixed units, e.g. 1px+1em or 1px*1px which have units
--strict-units=on|off that cannot be represented.
Report bugs to: http://github.com/cloudhead/less.js/issues
Home page: <http://lesscss.org/>
但是,您可以使用 inotify 来监视变化,这大致可以实现您想要的功能:
while inotifywait -r styles.less; do
lessc -x styles.less styles.css;
done
2019 年更新: 尽管lessc
是我偶尔还是会直接使用,但我倾向于使用完整的webpack这些天来堆积起来。
它并不像看上去那么令人心碎,但可能需要一些时间(和信任)才能设置好。特别是如果你对这些东西有先入为主的观念应该工作。
是的,我确信到 2019 年夏天,webpack 将成为一个死项目,所有客户端爱好者都会转向其他项目。这就是风险所在。好消息是,这最终是一个层在之上诸如 LESS 和 SASS 以及各种脚本语言之类的东西,而且都是客户端的。所以只要你愿意,你就可以继续当恐龙。
答案2
答案3
全局安装
$ (sudo) npm install -g less-watch-compiler
无主文件的使用
$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT
与主文件一起使用
$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT main.less