Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    Use of LESS in magento 2 template and modules

    Use of LESS in magento 2 template and modules

    Today I am going to explain the 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 :

    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 :

    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 🙂

    . . .

    Comments (2)

    Add Your Comment

  • Cvince
    How to add _module.less in custom extension? i have created _module.less file in frontend/web/css/source and after this content deploy. But style is not applying.
    • Webkul Support
      Hello Greetings for the Day..!!!!! Please follow these steps and and you will see the changes.Step 1 : set the deploy mode to developer. first : php bin/magento deploy:mode:set developer step 2 : create a custom module or if you have already create any of the module. example : create default.xml file here app/code/Webkul/Custommodule/view/frontend/layout/if already created file : then use this code in head . else

      step 3 : create file here : app/code/Webkul/Custommodule/view/frontend/web/custom.less

      @color: #ddcd6a;
      background-color: @color;

      step 4 : now run there commands and refresh the frontend :rm -rf var/view_preprocessed/rm -rf pub/static/frontend/Magento/luma/en_US/php bin/magento -f set:static-contetn:deploy Now you will see the changes as I did.please check the screen shot attached. NOTE : In my case module name is Namespace_Module = Webkul_Custommodule . You can have any.Thanks & Regards

      Prabhat RawatSoftware Engineer (Magento)
      Webkul Software Pvt. Ltd. Contact : India (+91)-9650486699 USA (+1)-9143531684

      A 67 Sector 63 ,
      Noida-201301 (U.P.)

      This email and any files transmitted with it are confidential and contain privileged or copyright information. If you are not the intended recipient you must not disseminate, copy, distribute, or use this email or the information contained in it for any purpose other than to notify us. If you have received this message in error, please notify the sender immediately, and delete this email from your system.

  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again