LESS automatically compile with Netbeans

Last Updated : |  

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.

Integrate LESS in NetBeans/usr/local/bin/lessc

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



Use LESS in the project

NetBeans LESS settings

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.

NetBeans LESS Projekt

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.

NetBeans LESS project

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

Your Comment

* This fields are required, email don't publish
You can use this tags: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
?

This field is optional
Fill this field link your name to your website.

Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
tnado © 2019 | All Rights Reserved
In cooperation with Hyperly