Welcome folks today in this blog post we will be converting or compiling less to css using less-watch-compiler command line library in Javascript

Installation

In order to use this library you need to first of all globally install this library by the npm command shown below

npm i -g less-watch-compiler

After installing this library you can use the commands anywhere in your system

Usage

Now in order to use this library commands you can make a configuration file where you can mention which directories you need to be constantly watching for changes so that you can convert all your less files to css files. Just make a configuration json file and copy paste the following code to it

{
    "watchFolder": "<input_folder>",   
    "outputFolder": "<output_folder>",
    "mainFile": "<main-file>",   
    "sourceMap": false,
    "plugins": "plugin1,plugin2",
    "less-args": "option1=1,option2=2",
    "runOnce": false,
    "enableJs": true
}

So you can see this contains a single object where you define various properties such as which folder to watch and which output folder to write the output files etc.

This library supports the various options as shown below

-h, --help                                                               output usage information
-V, --version                                                            output the version number
--main-file <file>                                                       Specify <file> as the file to always re-compile e.g. '--main-file style.less'.
--config <file>                                                          Custom configuration file path. (default: "less-watch-compiler.config.json")
--run-once                                                               Run the compiler once without waiting for additional changes.
--enable-js                                                              Less.js Option: To enable inline JavaScript in less files.
--source-map                                                             Less.js Option: To generate source map for css files.

Command to Convert Single LESS File to CSS File

Now we will look at a command where we will convert single or multiple less files which are present inside the directory and then we will be compiling them to css

less-watch-compiler inputdirectory destinationdirectory

Here input directory will be the directory in which all input files will be present

And destinationdirectory will be the directory where all output files will be written

less-watch-compiler input output

This will convert all less files which are present in input directory and then it will create a output directory called output and store all the output css files to it

Now if you only want to run it once you can add a option to it like this

less-watch-compiler --run-once input output