Unterschied zwischen _module.less und _extend.less

Gibt es einen Unterschied zwischen dem Erweitern eines Themas mit _module.lessund _extend.less? Und was ist die beste Vorgehensweise beim Erweitern eines Moduls / Themas?

Mein erster Gedanke war, dass es besser ist, _module.lesswenn man ein neues Modul stylt und _extend.lesswenn man ein Modul erweitert. Aber Luma verwendet, _module.lesswenn Sie das leere Thema erweitern, so dass die Theorie aus dem Fenster gegangen ist.

Der einzige Unterschied, den ich zwischen ihnen sehen kann, ist der _module.lessImport vor der responsiven Bibliothek und _theme.lesswohin _extend.lessnach ihnen.

Dies ist die Reihenfolge, in der sie importiert werden 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';

— Ben Crook
quelle

Antworten:

Die Antwort ist in den Magento-Dokumenten etwas versteckt:

Das Erweitern eines Themas mit _extend.less ist die einfachste Option, wenn Sie mit allen Funktionen des übergeordneten Themas zufrieden sind, aber weitere Stile hinzufügen möchten.

Lesen Sie hier mehr

Verwenden Sie _module.less, wenn Sie größere Änderungen an den Stilen eines Moduls vornehmen möchten, und _extend.less für kleinere Anpassungen. Weitere Beispiele zum Überschreiben von Komponentenstilen finden Sie im obigen Link.

— c.norin
quelle

Ich habe das gelesen, aber es erklärt nicht wirklich warum, es hört sich so an, als stünde kein Grund dahinter. Ich versuche herauszufinden, ob es einen Unterschied gibt. Ich habe _extend.less für alle meine Änderungen verwendet, da ich die Konsistenz der Verwendung von etwas vorziehe, weil 'Magento dies gesagt hat'.

— Ben Crook

@BenCrook wenn mein Lesen in den letzten Tagen mir recht tut, nein. Wenn jemand eine .lessDatei in seinem Design mit demselben Pfad wie eine Datei im übergeordneten Design / Modul hinzufügt , ist dies eine Überschreibung. Sie können dies möglicherweise überprüfen, indem Sie ein leeres _module.less in Ihrem Design erstellen und prüfen, ob die ursprünglichen Stile zutreffen.

— Darren Felton

Nach a php bin/magento setup:static-content:deploykönnen Sie nachschauen pub/static/frontend/<vendor>/<themeName>/<locale>/css/und pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/und es gibt symbolische Links für * .less-Dateien zu Ihrem Thema oder dem Modul / übergeordneten Thema, von dem es stammt.

— Darren Felton

Das ist richtig _module.less überschreibt die übergeordnete less-Datei, es gibt keine Vererbung oder Zusammenführung. Mir ist klar, dass ich das in meiner ursprünglichen Antwort klarer hätte

— sagen können

@MattCosentino Ich merke, dass diese Antwort sehr spät kommt, aber ich lasse dies hier, falls jemand darauf stößt: Bitte beachte den Unterschied zwischen _extends.less und _extend.less. Die _extend.less-Dateien können zu jedem Modulkontext hinzugefügt werden, um Stile aus einem übergeordneten Thema zu erweitern. Die Datei _extends.less befindet sich im Stammverzeichnis des Themas und wird zum Erweitern vorhandener Dienstprogramme verwendet (siehe <project> /lib/web/css/docs/source/_utilities.less).

— c.norin

Einfache Erklärung oder Unterschied zwischen beiden:

_extend.lessist die Möglichkeit, übergeordnete Themenstile zu erweitern / ändern, zum Beispiel, wenn Sie mit Ihrem übergeordneten Thema Luma zufrieden sind und nur die Schaltflächenstile in Ihrem benutzerdefinierten Thema ändern möchten, müssen Sie lediglich eine neue Datei _buttons_extend.lessunter web/css/sourcein Ihrem benutzerdefinierten Thema und erstellen Stile dort anpassen. Registrieren Sie diese Datei, indem Sie sie der _extend.lessDatei in Ihrem Themenverzeichnis hinzufügen .

Was ist, wenn Sie Stile eines Moduls erweitern möchten, z. B. das Auschecken eines Moduls? Nun, Sie können eine _extend.lessDatei in Ihrem Themenmodulordner erstellen Magento_Checkout/web/css/source/_extend.lessund dort das Modul-Styling hinzufügen / erweitern.

Wenn ich nun eine _module.lessDatei in meinem Modulverzeichnis hinzufüge, Magento_Checkout/web/css/source/_module.lessbeabsichtige ich, das Styling meiner übergeordneten Themen für dieses Modul zu überschreiben. In diesem Fall muss ich die _module.lessDatei aus dem Modulverzeichnis meines übergeordneten Themas kopieren und an dieser Datei Änderungen vornehmen. In diesem Fall wird diese Datei geändert Ersetzen Sie die übergeordnete Themendatei _module.lessvollständig.

— Devtype
quelle

Er spricht nie über Luma als Elternteil.

— Ezequiel Alba

Das _extends.lessmit einem S am Ende innerhalb des leeren Themas ist eine Datei, in der alle Klassen erstellt werden, die LESSspäter innerhalb des Themas erweitert werden können, ohne dass neue Komponenten oder eine modulare Struktur für Stiländerungen erstellt werden müssen. -> Für diejenigen, die mir nicht glauben: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less check the Datei.

Das _extend.lessohne das S am Ende ist, wenn Sie zu 99% mit dem, was das übergeordnete Thema hat, zufrieden sind und nur ein paar Dinge ändern müssen, etwas Styling ändern und das war's.

Über letzteres, meine persönliche Meinung, verwenden Sie es nicht für Ihre eigene Entwicklung. Es schafft später ein großes Durcheinander. Halten Sie Ihre Struktur modular mit _module.lessjedem Modul, das Sie anpassen möchten, und Sie erhalten am Ende ein besseres Ergebnis und ein wartbares Projekt.

— Ezequiel Alba
quelle