Compile .less files into .css after every update
Solution 1
There is now much easier method.
Install NodeJs. And via NPM install less-monitor
https://www.npmjs.org/package/less-monitor
Solution 2
Simply put, the -w
argument doesn't exist.
$ 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/>
However, you can use inotify to watch for changes and this accomplishes roughly what you want:
while inotifywait -r styles.less; do
lessc -x styles.less styles.css;
done
2019 update: While lessc
is something I still do use directly, occasionally, I tend to lean towards a full webpack stack these days.
It's not quite as soul destroying as it appears from afar, but it can take some time (and trust) to get set up. Especially if you have preconceptions about how this stuff should work.
And yes, I'm sure by Summer 2019 webpack will be a dead project and all the client-side-hipsters will have moved onto something else. That's just the risk here. The good thing is that ultimately this is a layer on top of things like LESS and SASS and various scripting languages, and it's all client side. So you can continue to be a dinosaur for as long as you like.
Solution 3
Use less-watch-compiler:
Install globally
$ (sudo) npm install -g less-watch-compiler
Usage without main file
$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT
Usage with main file
$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT main.less
Related videos on Youtube
STEEL
Updated on September 18, 2022Comments
-
STEEL over 1 year
I have installed node, and npm. With npm I downloaded less.
And when I do
lessc styles.less styles.css -x -w
in terminal, it compiles and compresses the code, but doesnt watch the file for changes, since Im expecting LESS to auto compile and refresh the page automatically. So, if I do any changes in my styles.less, every-time I have to go to terminal and enter the command to compile the less css.
Also, the compiler does NOT even show any compile errors.
Please guide me on how to achieve the above. This is my first day with LESS CSS.
-
don.joey over 10 yearsCan you rephrase your question title to make it better fit the content of your question?
-
int_ua about 10 yearsI've edited it.
-
-
STEEL over 10 yearsIm sorry, but Im using this on simple frontend HTML/css project. it s not Ruby or node.
-
Oli over 10 yearsSo? It's just a tool with which to generate your CSS (and in grunt's case, process your assets). It has nothing to do with the production stack.
-
STEEL over 10 yearsI still didnt get you. the WHILE DO Look you have given, where do I add it. I will check grunt soon
-
Oli over 10 yearsThat's bash... You'd stick it in a terminal and run it. You can remove the linebreaks if you want.
-
STEEL over 10 yearsThanks it worked. I just had to install inotify-tools and run your lines. :)
-
int_ua about 10 yearsFour improvement suggestions: why use
-r
if we are watching a single file? In my case I needed-m
too. Why rewrite the file for every event if we can use-e modify
? Also, I think it would be better to move-w
option note to the end of the answer. I cannot see my edits, not sure if they were rejected, so adding this comment. -
int_ua about 10 yearsUpdate: I have to use
inotifywait -r -e DELETE_SELF,ATTRIB,MODIFY
with Kate editor.-m
doesn't work for me. -
Mário Lima almost 9 yearsHmm,
less-monitor
hasn't been updated in 3 years, and assumes you run Windows — the CLI dies on OS X due to Windows-specific line endings. -
STEEL almost 9 yearsYes I used to use Windows. This is very old question. I was a noob back then. Now I use grunt and sometimes gulp. Thanks