Use of LESS in Magento 2 Template and Modules
Today I am going to explain use of LESS in magento 2 templates and modules in this article. In my previous blog I already explained Use Of LESS In Magento 2 .
Now I am going to elaborate more on how you can use LESS files in your custom modules or custom templates.
NOTE : I am using Server Side compilation with developer mode, you can use any one which you want.
So let’s start by creating a custom module with all basic files.
Now create a default.xml file under app/code/Namespace/Module/view/frontend/layout/ and put following code in the file :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Namespace_Module::custom.css"/>
</head>
</page>
In the above file, there must be a custom.css under app/code/Namespace/Module/view/frontend/web/ but do not put custom.css there, just put custom.less file there with the following code :
@color: #ddcd6a;
div
{
background-color: @color;
}
Now remove all files from “var/view_preprocessed/source/”, “var/view_preprocessed/css/” and “pub/static/frontend/Magento/current_theme/current_locale/” .
Clear your cache, load your frontend and see the changes. Congratulations !!! you have successfully created a LESS file instead of CSS file which reflects at frontend.
So the flow is like, when you defined custom.css, Magento finds the custom.css in app/code/Namespace/Module/view/frontend/web/ but it does not get success in finding that CSS file there, now it searches for file custom.less under app/code/Namespace/Module/view/frontend/web/ and if found then transform it to custom.css file and put in pub/static/….
I hope you got now how LESS preprocessing works for magento 2, now move towards the next, i.e. use of LESS in magento2 template.
I assume you know how templates will be created, I am using here custom theme with parent theme blank.
So, let’s create a LESS file named as _extend.less under app/design/frontend/Namespace/theme/web/css/source/ and write some LESS code in the file, by using this you inherits the magento blank theme LESS files, i.e. all the CSS and LESS files of Magento Blank theme will be loaded with _extend.less file and when you open pub/static/frontend/Namespace/current_theme/en_US/css/styles-l.less or styles-m.less files you will find there written @import ‘source/_extend.less’; that means along with all LESS files _extend.less file code will also be compiled and the css written in _extend.less file will be merged with default css files, i.e. styles-l.css and styles-m.css.
You can also create _extend.less file for any magento package in custom theme, i.e. app/design/frontend/Namespace/theme/Magento_Catalog/web/css/source/_extend.less this will also be merged with Magento Blank theme LESS.
That’s all for today in this article, hope it will help you to use LESS in custom modules and templates in magento 2. Try this and if you have any query then just comment below 🙂
Also, You can read our blog to know about the advantages of using LESS.