Najlepszy sposób na rozszerzenie modułu mniej w web / css / source / module, na przykład _minicart.less?

15

Jaki jest zatem najlepszy sposób na rozszerzenie mniejszej liczby plików <module>/web/css/source/module/, na przykład Magento_Checkout/web/css/source/module/_minicart.less?

Zakładając, że to

A) NADAWANIE

  1. Temat związany mniej musisz utworzyć (lub skopiować) mniej o tej samej nazwie motywu nadrzędnego i umieścić go w swoim motywie w ten sposób theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. specyficzne dla modułu mniej musisz utworzyć (lub skopiować) mniej o tej samej nazwie motywu nadrzędnego i umieścić go w swoim motywie w ten sposób theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. Lib UI mniej musisz utworzyć (lub skopiować) mniej z taką samą zawartością nazwy w folderze biblioteki i umieścić go w swoim motywie w ten sposób magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

i do

B) PRZEDŁUŻYĆ

  1. w mniejszym stopniu musisz utworzyć plik _extend.less w swoim motywie, dodając _extend w nazwie w ten sposób, <your-theme>/web/css/source/_navigation_extend.lessaby rozszerzyć theme-frontend-blank/web/css/source/_navigation.lessORAZ zarejestrować ten plik z dyrektywą @import w _extend.less zawartości motywu w web / css / source ->@import "_navigation_extend.less"
  2. specyficzne dla modułu mniej , musisz utworzyć plik _extend.less w ścieżce modułu motywu, tak jak ten, <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessktóry rozszerza oryginalny Magento_CatalogSearch oryginalny _module.less
  3. UI lib mniej musisz utworzyć mniej z taką samą zawartością nazwy w folderze biblioteki, dodając _extend w nazwie w ten sposób, <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lessaby rozszerzyć magento2-base/lib/web/css/source/lib/_buttons.lessORAZ zarejestrować ten plik z dyrektywą @import w _extend. Bez zawartości motywu w web / css / source - >@import "lib/_buttons_extend.less"

Teoria musi sugerować utworzenie _minicart_extend.less, ale to nie działa automatycznie. Może powinieneś zaimportować ten plik do _extend.less tego modułu, jak wyjaśniono w B1 lub B3?

I dlaczego te składniki, które rozszerzają mniej, nie są automatycznie uwzględniane podczas analizowania css, jeśli jest to właściwy sposób na ich rozszerzenie, ale należy je zaimportować do _extend.less?

(Pojawia się również inne pytanie: jakie są różnice między web/css/source/lib/_buttons.lessi web/css/source/_buttons.less? 😕)

Jestem nieco zdezorientowany. Mam nadzieję, że ktoś może mi pomóc.

Przepraszam za ten długi tekst.


Źródła:

Loreena
źródło

Odpowiedzi:

13

Zgodnie z konwencjami Magento 2 najlepszym sposobem na rozszerzenie stylów modułów jest:

Jeśli chcemy rozszerzyć style Magento_Checkout/web/css/source/module/_minicart.less, musimy mieć 2 pliki

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lessgdzie zaimportujemy nasze niestandardowe rozszerzenia. W tym przypadku@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less które będą zawierać nasze niestandardowe style.

Powodem, dla którego potrzebujemy _extend.lesspliku do określenia, @importsjest to, że Magento zawiera tylko automatycznie _extend.lessna moduł. *_extend.lessAutomatyczne sprawdzanie i dodawanie wszystkiego będzie czasochłonne i dlatego nie zostało tak zaimplementowane.

W Magento Blank pliki motywów odpowiedzialne za minicart znajdują się w /vendor/magento/theme-frontend-blank/Magento_Checkout/

Możemy również dodać wszystkie nasze niestandardowe style bezpośrednio do _extend.less. Jednak podzielenie ich na mniejsze i określone pliki, jak w oryginalnym module, zapewnia przejrzystość i lepszą organizację kodu. Jest to również zalecany sposób zgodny ze standardami Magento 2.

Jalogut
źródło
Dziękuję @Jalogut! Mogę więc nazwać „_minicart_extend.less” jako „foobar.less” i nie miałoby to żadnego znaczenia, ponieważ liczy się to, co @import w _extend.less. Dodanie „_extendd.less” do nazwy komponentu to tylko konwencja, która pomoże ci wszystko wyjaśnić?
Loreena
Dokładnie taki jest pomysł.
Jalogut
@ Jalogut, czy jesteś pewien, że powiedzą: „Sprawdzanie i dodawanie wszystkich * _extend.less automatycznie będzie czasochłonne” czy to twoje przypuszczenie? ponieważ IMO na pewno zajmie to trochę więcej, ale nie aż tak dużo, aby programiści robili to za każdym razem, gdy chcą dostosowywać (plus małe zamieszanie na początku)
medmek
„Powodem, dla którego potrzebujemy pliku _extend.less do określenia @imports, jest to, że Magento automatycznie uwzględnia tylko _extend.less na moduł.” Myślę, że chciałeś powiedzieć, że każdy moduł ma jeden _extend.less i na końcu są one połączone w jeden duży plik _extend.less
Black
„Możemy również dodać wszystkie nasze niestandardowe style bezpośrednio do _extend.less” To zły pomysł, ponieważ „chrząknięcie” nie nasłuchuje zmian w tym pliku. Używaj go tylko do importowania i zawsze wykonuj połączenia grunt refreshpo wprowadzeniu zmian w tym pliku.
Czarny