How we can use less in magento2

Question

can anyone please tell me the less in magento2, i know how to use custom less files, but i can not understand , which is there in default magento2 like , In vendor it is having much less files like inside the source file having like variables.less, global.less ...

Please let me know if anybody know this. how we can override with all these.

Thanks

Answer 1

You can try using below sample less theme, and understand how it works. Try in your locally magento instance.

• SampleLessTheme

Answer 2

You can use less file inside custom or child theme folder like. app-> design-> frontend-> Vendor-> theme-> web-> css-> _extend.less. You can make all changes by overriding magento2 less/css inside this file.

Answer 3

Try Creating the less CSS file directly in your custom module as globally.
Create _module.less file in your custom module in Vendor/Module/view/frontend/web/css/source/_module.less

You need to clear view_preprocessed/pub/static/frontend directory and styles-l.css & styles-m.css from your theme in pub/static/frontend

We can also Setup the GRUNT to regenerate the CSS.

There are also some other ways to use less CSS in Magento as per the below reference. https://webkul.com/blog/use-less-magento-2/
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html