Go to file
2023-07-30 01:20:33 +01:00
dist Code Upgrade 2023-07-30 01:20:33 +01:00
.gitignore Code Upgrade 2023-07-30 01:20:33 +01:00
package-lock.json Update npm packages 2023-07-29 23:59:59 +01:00
package.json Code Upgrade 2023-07-30 01:20:33 +01:00
README.md Code Upgrade 2023-07-30 01:20:33 +01:00

Less watch for .less files

This is a super-light npm package that watches .less files and actively compiles them into .css files


Prerequisites

You need less npm package insalled. you can add it your project by running:

npm install less

Installation

To install this package simply run:

npm install lessc-watcher

How to use

There are few different ways to run your less compiler

Basic usage

npx lessc-watcher --src ./folder --dst ./dist/less.css

This traverses the folder and searches for a main.less file. This file serves as the source for your bundled .css file. If you want to target a specific file, use:

npx lessc-watcher --src ./folder/src.less --dst ./dist/less.css

Or you can just watch an entire folder. In this case less-watch will searc for an entry file named main.less. Without this entry file, your compiler wouldn't work.

npx lessc-watcher --src ./folder --dst ./dist/less.css

NOTE: If you only provide a destination path, without specifying the exact file name in .css, your files will be compiled to a css file named _main.css. This is done to prevent conflicts with another possible main.css file.

Adding more source folders

You can add more source folders by using a comma(,) separator. Example:

npx lessc-watcher --src ./folder-1,./folder-2 --dst ./dist/folder-1.css,./dist/folder-2.css

NOTE: Your --dst input must match the number of comma-separated folders in your src input.

Advanced Features

lessc-watcher has more advanced features to better fine-tune your files

Ignore files

Ignore files/folders by enlosing the names in braces. Eg (general).less

Compile specific files

If you're watching an entire folder, you can compile specific files in that folder to a stanalone file. Example if you create a file named [test].less in your watch directory, in your distribution directory there will be an extra file named test.css.