Différence entre _module.less et _extend.less

22

Existe-t-il une différence entre l'extension d'un thème à l'aide de _module.lesset _extend.less? Et quelle est la meilleure pratique lors de l'extension d'un module / thème?

Ma première pensée a été qu'il était préférable de l'utiliser _module.lesslors de la création d'un nouveau module et _extend.lesslors de l'extension d'un module. Mais Luma utilise _module.lesspour étendre le thème vide de sorte que la théorie a disparu.

La seule différence que je peux voir entre eux est _module.lessimportée avant la bibliothèque réactive et _theme.lessoù as _extend.lessest importée après eux.

C'est l'ordre dans lequel ils sont importés 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';
magento2 frontend view less-css less Ben Crook
la source

Réponses:

20

La réponse est quelque peu cachée dans les documents Magento:

L'extension d'un thème à l'aide de _extend.less est l'option la plus simple lorsque vous êtes satisfait de tout ce que contient le thème parent, mais que vous souhaitez ajouter plus de styles.

En savoir plus ici

Utilisez _module.less lorsque vous souhaitez apporter des modifications majeures aux styles d'un module et utilisez _extend.less pour des ajustements mineurs. Vous trouverez plus d'exemples sur la façon de remplacer les styles de composants dans le lien ci-dessus.

c.norin
la source
1
J'ai lu ça mais ça n'explique pas vraiment pourquoi, on dirait qu'il n'y a pas de raisonnement derrière ça. J'essaie de comprendre s'il y a une différence. J'utilise _extend.less pour toutes mes modifications car je préfère la cohérence à l'utilisation de quelque chose parce que 'Magento l'a dit'.
Ben Crook
1
@BenCrook si ma lecture ces derniers jours me sert bien, non. Si quelqu'un devait ajouter un .lessfichier dans son thème avec le même chemin d'accès qu'un fichier dans le thème / module parent, c'est un remplacement. Vous pouvez probablement vérifier en créant un _module.less vide dans votre thème et en vérifiant si les styles originaux s'appliquent.
Darren Felton
1
Après un php bin/magento setup:static-content:deploy, vous pouvez regarder pub/static/frontend/<vendor>/<themeName>/<locale>/css/et pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/il y aura des liens symboliques pour les fichiers * .less vers votre thème, ou le module / thème parent dont il provient.
Darren Felton
1
C'est-à-dire que _module.less remplace le fichier sans parent, il n'y a ni héritage ni fusion. Je réalise que j'aurais pu clarifier cela dans ma réponse originale :)
c.norin
1
@MattCosentino Je me rends compte que cette réponse arrive très tard, mais je vais laisser cela ici au cas où quelqu'un tomberait dessus: veuillez noter la différence entre _extends.less et _extend.less. Les fichiers _extend.less peuvent être ajoutés à n'importe quel contexte de module, pour étendre les styles à partir d'un thème parent. _Extends.less se trouve à la racine du thème et est utilisé pour étendre les utilitaires existants (voir <projet> /lib/web/css/docs/source/_utilities.less).
c.norin
3

Explication simple ou différence entre les deux:

_extend.lessest le moyen d'étendre / de modifier les styles de thèmes parents par exemple, vous êtes satisfait de votre thème parent Luma et vous voulez juste changer les styles de bouton dans votre thème personnalisé, tout ce que vous avez à faire est de créer un nouveau fichier _buttons_extend.lesssous web/css/sourcedans votre thème personnalisé et ajuster les styles là-dedans. Enregistrez ce fichier en l'ajoutant au _extend.lessfichier dans votre répertoire de thèmes.

Et si vous souhaitez étendre les styles d'un module, par exemple le module de paiement, vous pouvez créer un _extend.lessfichier dans le dossier de votre module de thèmes, par exemple, Magento_Checkout/web/css/source/_extend.lesset y ajouter / étendre le style du module.

Maintenant, si j'ai ajouté un _module.lessfichier dans le répertoire de mon module, Magento_Checkout/web/css/source/_module.lessj'ai l'intention de remplacer le style de mes thèmes parents pour ce module, auquel cas je dois copier _module.lessle fichier ' ' du répertoire de module de mon thème parent et apporter des modifications à ce fichier, auquel cas ce fichier sera remplacer _module.lesscomplètement le fichier des thèmes parents .

Devtype
la source
Il ne parle jamais de Luma en tant que parent.
Ezequiel Alba
1

Le _extends.lessavec un S à la fin dans le thème vide, est un fichier où ils ont créé toutes les classes qui peuvent être étendues via LESSplus tard dans le thème, sans avoir besoin de créer de nouveaux composants ou une structure modulaire pour les changements de style. -> Pour ceux qui ne me croient pas: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less vérifier la fichier.

Le _extend.lesssans le S à la fin, c'est pour quand vous êtes à 99% satisfait de ce que le thème parent a et vous avez juste besoin de changer quelques choses, changer un peu de style et c'est tout.

À propos de ce dernier, mon opinion personnelle, ne l'utilisez pas pour votre propre développement. Cela crée un gros gâchis plus tard. Gardez votre structure modulaire avec _module.lesspour chaque module que vous souhaitez personnaliser et vous obtiendrez un meilleur résultat et un projet maintenable à la fin.

Ezequiel Alba
la source