Magento2 – Difference Between _module.less and _extend.less

frontendlessless-cssmagento2view

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 added 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';

Best Answer

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.

Related Topic