Der beste Weg, um ein Modul zu erweitern, das weniger in web / css / source / module zu finden ist, wie _minicart.less?


14

Was ist dann der beste Weg, um weniger Dateiinhalte zu erweitern <module>/web/css/source/module/, wie zum Beispiel Magento_Checkout/web/css/source/module/_minicart.less?

Vorausgesetzt, das zu

A) AUSSERBRECHEN

  1. themenbezogen weniger Sie müssen ein Thema mit demselben Namen wie das übergeordnete Thema erstellen (oder kopieren) und es wie folgt in Ihr Thema einfügen theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. weniger modulspezifisch Sie müssen ein weniger mit demselben Namen wie das übergeordnete Thema erstellen (oder kopieren) und es wie folgt in Ihr Thema einfügen theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib less Sie müssen ein less mit dem gleichen Namen im Bibliotheksordner erstellen (oder kopieren) und es wie folgt in Ihr Theme einfügen magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

und zu

B) EXTEND

  1. themenbezogene weniger müssen Sie eine _extend.less-Datei in Ihrem Thema erstellen, indem Sie _extend in dem Namen wie folgt hinzufügen <your-theme>/web/css/source/_navigation_extend.less, um theme-frontend-blank/web/css/source/_navigation.lessdiese Datei zu erweitern UND mit der @ import- Direktive in _extend.less des Themeninhalts in web / css / source -> zu registrieren@import "_navigation_extend.less"
  2. Modulspezifisch weniger müssen Sie eine _extend.less-Datei in Ihrem Themenmodulpfad erstellen, <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessdie das ursprüngliche _module.less von Magento_CatalogSearch erweitert
  3. UI lib less Sie müssen ein less mit dem gleichen Namen im Bibliotheksordner erstellen, indem Sie _extend im folgenden Namen hinzufügen <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.less, um magento2-base/lib/web/css/source/lib/_buttons.lessdiese Datei zu erweitern UND mit der @ import- Direktive in _extend.less zu registrieren, unabhängig vom Themeninhalt in web / css / source - >@import "lib/_buttons_extend.less"

Theory muss vorschlagen, dass Sie ein _minicart_extend.less erstellen, aber es funktioniert nicht automatisch. Vielleicht solltest du diese Datei in die _extend.less des Moduls importieren, wie in B1 oder B3 erklärt?

Und warum werden diese Komponenten, die sich weniger erstrecken, nicht automatisch in das Parsen des CSS einbezogen, wenn dies der richtige Weg ist, sie zu erweitern, sondern in _extend.less importiert werden müssen?

(Hier kommt auch eine andere Frage: Was sind die Unterschiede zwischen web/css/source/lib/_buttons.lessund web/css/source/_buttons.less? 😕)

Ich bin ein bisschen verwirrt. Hoffe mir konnte jemand helfen.

Entschuldigung für diesen langen Text.


Quellen:

Antworten:


12

Gemäß den Magento 2-Konventionen können Sie die Modulstile am besten wie folgt erweitern:

Wenn wir Stile erweitern möchten, Magento_Checkout/web/css/source/module/_minicart.lessbenötigen wir 2 Dateien

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lesswo wir unsere benutzerdefinierten Erweiterungen importieren. In diesem Fall@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less das wird unsere benutzerdefinierten Stile enthalten.

Der Grund, warum wir eine _extend.lessDatei benötigen , um diese anzugeben, @importsist, dass Magento nur automatisch ein _extend.lessModul pro Modul enthält. Das *_extend.lessautomatische Überprüfen und Hinzufügen aller Elemente ist zeitaufwändig und wurde daher nicht so implementiert.

In Magento Blank Theme-Dateien, die für Minicart verantwortlich sind, befinden sich in /vendor/magento/theme-frontend-blank/Magento_Checkout/

Wir könnten auch alle unsere benutzerdefinierten Stile direkt in die hinzufügen _extend.less. Wenn Sie sie jedoch wie im ursprünglichen Modul in kleinere und spezifische Dateien aufteilen, bleibt der Code klarer und übersichtlicher. Dies ist auch der empfohlene Weg gemäß Magento 2-Standards.


Vielen Dank, dass Sie @Jalogut! Also könnte ich "_minicart_extend.less" auch als "foobar.less" bezeichnen und es würde keinen Unterschied machen, da es darauf ankommt, was Sie in _extend.less @importieren. Das Hinzufügen von "_extendd.less" zum Komponentennamen ist nur eine Konvention, die Ihnen hilft, alles klarer zu halten?
Loreena

Genau das ist die Idee.
Jalogut

@Jalogut sind Sie sicher, dass sie dies sagen: "Das automatische Überprüfen und Hinzufügen von * _extend.less ist zeitaufwändig" oder ist es Ihre Vermutung? weil ich sicher bin, dass es ein wenig länger
dauert
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.