每次更新后将 .less 文件编译为 .css

Question

我已经安装了 node 和 npm。使用 npm 我下载的更少。

当我这样做时

lessc styles.less styles.css -x -w

在终端中，它编译和压缩代码，但不查看文件的更改，因为我希望 LESS 自动编译和自动刷新页面。因此，如果我对styles.less 进行任何更改，每次我都必须转到终端并输入命令来编译less css。

此外，编译器甚至不显示任何编译错误。

请指导我如何实现上述目标。这是我使用 LESS CSS 的第一天。

Answer 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 以及各种脚本语言之上的层，而且都是客户端。因此，只要您愿意，您就可以继续成为恐龙。

Answer 2

现在有更简单的方法。

安装 NodeJ。并通过 NPM 安装 less-monitor

https://www.npmjs.org/package/less-monitor