Magento 2 | Compile default less, js, and static files

For a customer request, i need to restore a Magento 2 website ( that isn’t developed by me ), and need to check if all it’s right for working on that website.
Basically we need to made some SEO and Usability improvement ( change heading, change color, add some call to actions, ecc, ecc ).
So i want check if can compile LESS library.
Magento by default use ” Less PHP library ” or “Less.js“, basically, it use 2 methods for check and compile the LESS.
1° Server-side Less compilation (Less PHP library).
2° Client-side Less compilation (Less.js library ).

Server-side Less compilation

Is the default compilation mode, and is the only option in production application mode.
In server-side Less compilation mode, to have your changes applied, you need to do the following:
– Clear pub/static/frontend/// by deleting all files in the directory.
– Clear the var/cache and var/view_preprocessed directories by deleting all files in the the directory in the file system (if they already existed there).
– Trigger static files compilation and publication ( by reloading a site page ,or by running the static files deployment tool ).

Running the static files deployment tool by open terminal window and add :

<your Magento install dir>/bin/magento setup:static-content:deploy

if you have an error like :
“No such files or directory”, probably you have a permission problem, so, run this command for change permission on ” var, bin, pub/static/, app/etc ” folders.

sudo chmod -R 0777 var/* bin/* pub/static/* app/etc/*

Now you can re run ( -f is “Deploy using quick strategy” )

bin/magento setup:static-content:deploy -f

Reloading the page only triggers compilation and publication of the styles used on this very page, and does not give you the information about the errors if any. So if you made changes in .less files used on many pages, and want to debug them, using the deployment tool is the better option.

Client-side LESS compilation

The default configuration of “less.js” library is set in lib/web/less/config.less.js; you can change it as needed.
In client-side compilation mode, most of the stylesheet customizations display immediately after you reload a page in a browser.
There are certain types of changes, that require you to clear the pub/static/frontend/// directory :

– If you change the root source files that contain the @magento_import directive
– If you rename, remove, or add a .less file imported with a @magento_import or @import directive

That’s all.