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:
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
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.
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.