How to Add Less in Magento 2

Less is a CSS preprocessor which helps developers create scalable and manageable CSS style sheets. It allows extending the capabilities and feature of CSS.

Magento 2 supports CSS preprocessor-Less and it is very useful in making its frontend more productive. So, in this tutorial, I am going to teach you how to use less in Magento 2.

Before starting integration of Less in Magento 2, let’s understand the process first. When the less processes, it will convert automatically to CSS. Here’s an example:

Less:

@color: #FF5733;
.class
{
   background-color: @color;
   color: @color;
}

When I will run the Less, It will convert to CSS:

CSS:

.class
{
   background-color: #FF5733;
   color: #FF5733;
}

Now I hope that you are familiar with Less, so, I am going to start integrating Less in Magento 2. For this, I will create a custom module. If you want to learn in depth about creating custom module in Magento 2, here’s a step-by-step guide: How to Create a Module in Magento 2.

First, create directories in the root directory of your Magento 2:

root directory

Now create module.xml in app/code/Less/Mymodule/etc and paste the following code in this file to configure the module:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Less_Mymodule" setup_version="1.0.0"></module>
</config>

After the configuration of module, you need to register the module. Create registration.php in app/code/Less/Mymodule and paste the following in the file:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Less_Mymodule',
__DIR__
);

Now create default.xml in app/code/Less/Mymodule/view/frontend/layout and paste the following code in this 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="Less_Mymodule::color.css"/>
  </head>
</page>

I have defined color.css in default.xml but I will create color.less in app/code/Less/Mymodule/view/frontend/web and paste the following code to it:

@mycolor: #795548;
div
{
   background-color: @mycolor;
}

After following all the above steps, open the SSH terminal and go to the root directory of your Magento 2.

Once getting into the root directory, first run the following command to check the status of module:

php bin/magento module:status

If you find our module in the disabled list then run the following command:

php bin/magento module:enable Less_Mymodule

Now run the following command:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*

Upgrade the setup by running this command:

php bin/magento setup:upgrade

Now compile the setup by running this command:

php bin/magento setup:di:compile

Deploy static content by running this command:

php bin/magento setup:static-content:deploy

Clean and flush the cache by running these commands one by one:

php bin/magento cache:clean
php bin/magento cache:flush

Now reindex by running this command:

php bin/magento indexer:reindex

And you’re Done! Open your store and you will see this result:

home page

Conclusion:

Less is required to make more scalable and manageable stylesheets. After following this tutorial, you should now be able to use less in Magento 2. If you want to add something to the tutorial, simply use the comment section below!



Syed Muneeb Ul Hasan is an active contributor at Magenticians. He is an expert in PHP and Magento and prefers to educate users in the implementation of Magento. When not working, he loves to play games and watch cricket.