Gsyfuy

Heating basement floor with water heater

Called into a meeting and told we are being made redundant (laid off) and "not to share outside". Can I tell my partner?

How to lift/raise/repair a segment of concrete slab?

Are small insurances worth it

Can I become debt free or should I file for bankruptcy? How do I manage my debt and finances?

Are there any other Chaos-worshipping races?

Is there a full canon version of Tyrion's jackass/honeycomb joke?

In iTunes 12 on macOS, how can I reset the skip count of a song?

Is divide-by-zero a security vulnerability?

Can we carry rice to Japan?

Make me a metasequence

How to kill a localhost:8080

What does @RC mean in SSDT SQL Server Unit Testing?

What is a term for a function that when called repeatedly, has the same effect as calling once?

How to evaluate the limit where something is raised to a power of x?

How do I deal with being jealous of my own players?

Traversing Africa: A Cryptic Journey

Wrap all numerics in JSON with quotes

VAT refund for a conference ticket in Sweden

At what level can a party fight a mimic?

How can I create a Table like this in Latex?

What is the difference between a forward slip and a side slip?

Six real numbers so that product of any five is the sixth one

Did Amazon pay $0 in taxes last year?

Difference between _module.less and _extend.less

source/lib not available in magento 2 frontend designCSS and JS is not loading in new theme@media-common - Why do we need to use this?& when (@media-common = true) - Changes not picked up unless I do static-content-deployMagento 2 CSS Media Queries not working onBest way to extend module less found in web/css/source/module, like _minicart.less?Difference between _extend.less . and _extends.lessUsing media queries inError: Exception #0 (InvalidArgumentException): Unable to serialize value - Produced by custom ThemeAfter update (version 2.2) problem when compiling

15

2

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

magento2 frontend view less-css less

share|improve this question

asked May 20 '16 at 9:48

Ben CrookBen Crook

9,0122477

add a comment | 

15

2

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

magento2 frontend view less-css less

share|improve this question

asked May 20 '16 at 9:48

Ben CrookBen Crook

9,0122477

add a comment | 

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

magento2 frontend view less-css less

share|improve this question

asked May 20 '16 at 9:48

Ben CrookBen Crook

9,0122477

//

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

share|improve this question

asked May 20 '16 at 9:48

Ben CrookBen Crook

9,0122477

share|improve this question

asked May 20 '16 at 9:48

Ben CrookBen Crook

9,0122477

asked May 20 '16 at 9:48

Ben CrookBen Crook

9,0122477

asked May 20 '16 at 9:48

Ben CrookBen Crook

9,0122477

2 Answers
2

active

oldest

votes

16

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.

share|improve this answer

edited Jan 10 '18 at 21:21

Rafael Corrêa Gomes

4,53423264

answered May 22 '16 at 13:54

c.norinc.norin

31727

• 
  
  
  

  
  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
  

  
  
  
  

 | 
show 3 more comments

0

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.

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.

share|improve this answer

answered 10 mins ago

Ezequiel AlbaEzequiel Alba

989

add a comment | 

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f116248%2fdifference-between-module-less-and-extend-less%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

16

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.

share|improve this answer

edited Jan 10 '18 at 21:21

Rafael Corrêa Gomes

4,53423264

answered May 22 '16 at 13:54

c.norinc.norin

31727

• 
  
  
  

  
  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
  

  
  
  
  

 | 
show 3 more comments

16

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.

share|improve this answer

edited Jan 10 '18 at 21:21

Rafael Corrêa Gomes

4,53423264

answered May 22 '16 at 13:54

c.norinc.norin

31727

• 
  
  
  

  
  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
  

  
  
  
  

 | 
show 3 more comments

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.

share|improve this answer

edited Jan 10 '18 at 21:21

Rafael Corrêa Gomes

4,53423264

answered May 22 '16 at 13:54

c.norinc.norin

31727

share|improve this answer

edited Jan 10 '18 at 21:21

Rafael Corrêa Gomes

4,53423264

answered May 22 '16 at 13:54

c.norinc.norin

31727

edited Jan 10 '18 at 21:21

Rafael Corrêa Gomes

4,53423264

edited Jan 10 '18 at 21:21

Rafael Corrêa Gomes

4,53423264

answered May 22 '16 at 13:54

c.norinc.norin

31727

answered May 22 '16 at 13:54

c.norinc.norin

31727

0

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.

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.

share|improve this answer

answered 10 mins ago

Ezequiel AlbaEzequiel Alba

989

add a comment | 

0

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.

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.

share|improve this answer

answered 10 mins ago

Ezequiel AlbaEzequiel Alba

989

add a comment | 

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.

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.

share|improve this answer

answered 10 mins ago

Ezequiel AlbaEzequiel Alba

989

share|improve this answer

answered 10 mins ago

Ezequiel AlbaEzequiel Alba

989

answered 10 mins ago

Ezequiel AlbaEzequiel Alba

989

answered 10 mins ago

Ezequiel AlbaEzequiel Alba

989