22

Is there any difference between extending a theme using _module.less and _extend.less? And what is the best practice when extending a module/theme?

My first thought was it's better to use _module.less when styling a new module, and _extend.less when extending a module. But Luma uses _module.less when extending the blank theme so that theory has gone out the window.

The only difference I can see between them is _module.less is imported before the responsive library and _theme.less where as _extend.less is imported after them.

This is the order they are imported in vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are additional to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

//@magento_import 'source/_extend.less';
20

The answer is somewhat hidden in the Magento docs:

Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.

Read more here

Use _module.less when you want to make major changes in styles for a module and use _extend.less for minor adjustments. You'll find more examples on how to override component styles in the link above.

  • 1
    I've read that but it doesn't really explain why, it sounds like there's no reasoning behind it. I'm trying to figure out if there's any difference. I've been using _extend.less for all my changes as I prefer consistency to using something because 'Magento said so'. – Ben Crook May 23 '16 at 6:41
  • 1
    @BenCrook if my reading these past few days serves me right, no. If someone were to add any .less file in their theme with the same path as a file in the parent theme/module, that is an override. You could probably verify by creating a blank _module.less into your theme, and seeing if the original styles apply. – Darren Felton Dec 14 '16 at 14:20
  • 1
    After a php bin/magento setup:static-content:deploy, you can look into pub/static/frontend/<vendor>/<themeName>/<locale>/css/ and pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/ and there will be symbolic links for *.less files to either your theme, or the module/parent theme it is coming from. – Darren Felton Dec 14 '16 at 14:23
  • 1
    That is correct _module.less overrides the parent less file, there is no inheritance or merging. I realise I could have made that more clear in my original answer :) – c.norin Dec 15 '16 at 12:24
  • 1
    @MattCosentino I realise this reply comes very late, but I'll leave this here in case someone stumbles upon it: Please note the difference between _extends.less and _extend.less. The _extend.less files can be added to any module context, to extend styles from a parent theme. The _extends.less is located in the root of the theme and is used to extend existing utilities (refer to <project>/lib/web/css/docs/source/_utilities.less). – c.norin Jan 15 '18 at 17:01
3

Simple explanation or difference between both:

_extend.less is the way to extend/modify parent themes styles for example you're happy with your parent theme Luma and just want to change the button styles in your custom theme, all you need to do is create a new file _buttons_extend.less under web/css/source in your custom theme and adjust styles in there. Register this file by adding it to the _extend.less file inside your theme directory.

What if you want to extend styles of a module e.g. checkout module, well you can create an _extend.less file inside your themes module folder e.g. Magento_Checkout/web/css/source/_extend.less and add/extend module styling in there.

Now if I added _module.less file inside my module directory Magento_Checkout/web/css/source/_module.less I'm intending to override my parent themes styling for this module in which case I need to copy '_module.less' file from my parent theme's module directory and make modification to that file in which case this file will replace parent themes _module.less file altogether.

  • He's never talking about Luma as a parent. – Ezequiel Alba Aug 22 at 23:14
1

The _extends.less with an S at the end within the Blank Theme, is a file where they created all the classes that can be extended via LESS later within the theme, without the need of creating new components or modular structure for style changes. -> For those who don't believe me: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less check the file.

The _extend.less without the S at the end, is for when you are 99% happy with what the parent theme has and you just need to change a couple of things, change some styling and that's it.

About the latter one, my personal opinion, don't use it for your own developing. It creates a big mess later. Keep your structure modular with _module.less for every module you want to customize and you will get a better outcome & maintainable project at the end.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.