{"id":1947,"date":"2021-11-17T08:37:35","date_gmt":"2021-11-17T08:37:35","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-custom-less-file-in-magento-2\/"},"modified":"2025-05-21T17:03:11","modified_gmt":"2025-05-21T11:33:11","slug":"add-custom-less-file-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-less-file-in-magento-2\/","title":{"rendered":"How to Add Custom LESS File in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em><strong>Add custom LESS file in Magento 2<\/strong><\/em>&nbsp;to improve your Magento store\u2019s 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&nbsp;<a href=\"https:\/\/developer.adobe.com\/commerce\/frontend-core\/guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">add custom LESS file in Magento 2<\/a>&nbsp;and do that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, I have provided complete steps to add custom LESS file in Magento 2 to change the appearance and&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/magento-2-extensions-for-improved-customer-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">improve the user experience of your Magento 2 store<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add Custom LESS File in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the below-mentioned easy steps to add custom LESS file in Magento 2 store to improve your store\u2019s style and customize it as per your requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create&nbsp;<strong>vendor_extension_index.xml<\/strong>&nbsp;file at the&nbsp;<strong>Vendor\/Extension\/view\/frontend\/layout\/<\/strong>&nbsp;directory with the following code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;head>\n    &lt;css src=\"Vendor_Extension::css\/invite_page.css\"\/>\n&lt;\/head><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now, create a custom LESS file with the same name as coded in the HTML, which is&nbsp;<strong>invite_page.less<\/strong>&nbsp;in this case, at the&nbsp;<strong>app\/code\/Vendor\/Extension\/view\/frontend\/web\/css\/&nbsp;<\/strong>directory and add the following code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@divcolor: #FFF000;\ndiv {\ncolor: @divcolor;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now, when the&nbsp;<strong>vendor_extension_index.xml<\/strong>&nbsp;will not find the&nbsp;<strong>invite_page.css<\/strong>&nbsp;file, it will generate the CSS file as per the variables and rules that we have added in the LESS file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it, this is how you can easily add custom LESS file in Magento 2 as per your requirement and can generate dynamic CSS files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Moreover, you can also\u00a0<a href=\"https:\/\/meetanshi.com\/hire-magento-developer.html\" target=\"_blank\" rel=\"noreferrer noopener\">hire a certified Magento developer<\/a>\u00a0to get the LESS file coded as per your requirement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do not forget to share the tutorial with the Magento community through social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add custom LESS file in Magento 2&nbsp;to improve your Magento store\u2019s style and appearance. Magento is a highly customizable eCommerce platform that allows dynamic store&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1947","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1947"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1947\/revisions"}],"predecessor-version":[{"id":13854,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1947\/revisions\/13854"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}