How to Add Custom LESS File in Magento 2

Add custom LESS file in Magento 2 to improve your Magento store’s style and appearance. Magento is a highly customizable eCommerce platform that allows dynamic store creation. Store owners may often require to customize their store theme or style as per their requirements. You can add custom LESS file in Magento 2 and do that.

LESS files are the preprocessors of the CSS that simplify the complex CSS files generation and further extend their functionality and capability. It supports variables, nesting, functions, and operations that allow dynamic CSS generation, and improves the front-end style development.

In this article, I have provided complete steps to add custom LESS file in Magento 2 to change the appearance and improve the user experience of your Magento 2 store.

Steps to Add Custom LESS File in Magento 2:

Follow the below-mentioned easy steps to add custom LESS file in Magento 2 store to improve your store’s style and customize it as per your requirements.

Create vendor_extension_index.xml file at the Vendor/Extension/view/frontend/layout/ directory with the following code:

Now, create a custom LESS file with the same name as coded in the HTML, which is invite_page.less in this case, at the app/code/Vendor/Extension/view/frontend/web/css/ directory and add the following code:

Now, when the vendor_extension_index.xml will not find the invite_page.css file, it will generate the CSS file as per the variables and rules that we have added in the LESS file.

That’s it, this is how you can easily add custom LESS file in Magento 2 as per your requirement and can generate dynamic CSS files.

If you are facing any problems or have any queries, do let us know in the comment section. Moreover, you can also hire a certified Magento developer to get the LESS file coded as per your requirement.

Do not forget to share the tutorial with the Magento community through social media.

Thank you.