LESS automatically compile with Netbeans

Last Updated :  20.06.2019 |   4 minutes read time

In a tutorial I showed how to integrate Netbeans GruntJS and minimize LESS, SASS or even JavaScript files just like using modules in Grunt. But Netbeans offers for LESS and SASS (CSS preprocessors), of course it makes no sense if you already minimize with Grunt. However, you do not need JavaScript files for each project and then it would make sense again.

What do we need?

So there is not much needed to activate and use Less in Netbeans. First, we need the Node Package Manager, also load and install Node.js on your system:
 Node JS

Install Less and integrate it into NetBeans

If Node.js was installed, we can now add npm Less Lokal or Global, in our case Global, because we want to use it in every project. So we open our terminal and enter the following.

 LESS
 LESS Plugin - Clean CSS | GitHub
USERNAME$ sudo npm install -g less

Here is another plugin if you want to clean up the CSS when compiling from LESS to CSS.

USERNAME$ sudo npm install -g less-plugin-clean-css

The sudo we use to run it as an admin or the user who is in the sudoers list can run it. Otherwise it can happen that you do not have enough rights and an error is issued, at the same time nothing was installed. After installing Less global, we get information about our installation.

/usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
+ less@3.9.0
added 13 packages from 34 contributors, removed 27 packages and updated 35 packages in 4.276s

In this issue, we can see well where Less is located and use the same for NetBeans. For this we open NetBeans and go to Preferences -> HTML / JS -> CSS Preprocessors to LESS Path there we have to add our LESS file path, but here does not matter which one, because the one is a symlink to the actual executable bin shows.

/usr/local/bin/lessc

So now we've also integrated Less into NetBeans and we can start using it.

Use LESS in the project

When we have created a project, we open the project properties to set our CSS preprocessors. If we have entered the path as our plugin options (in this case clean css) we save.

At the top of the picture you can see that I have not directly selected the less folder so not all files in the folder to convert but only the ones I want.

So then my project structure would look like and everything that is in our app / folder and Imported will be compiled in CSS.