Różnica między _module.less a _extend.less

Czy jest jakaś różnica między rozszerzaniem motywu za pomocą _module.lessi _extend.less? A jaka jest najlepsza praktyka przy rozszerzaniu modułu / motywu?

Moją pierwszą myślą było to, że lepiej jest używać go _module.lesspodczas projektowania nowego modułu i _extend.lesspodczas jego rozbudowy. Ale Luma używa, _module.lessgdy rozszerza pusty motyw, aby teoria zniknęła za oknem.

Jedyną różnicą, którą widzę między nimi, jest _module.lessimportowany przed biblioteką responsywną i _theme.lessgdzie _extend.lessjest importowany po nich.

W tej kolejności są importowane 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
źródło

Odpowiedzi:

Odpowiedź jest nieco ukryta w dokumentach Magento:

Rozszerzenie motywu za pomocą _extend.less jest najprostszą opcją, gdy jesteś zadowolony ze wszystkiego, co ma motyw nadrzędny, ale chcesz dodać więcej stylów.

Przeczytaj więcej tutaj

Użyj _module.less, jeśli chcesz dokonać poważnych zmian stylów dla modułu i użyj _extend.less do drobnych korekt. Więcej przykładów na temat zastępowania stylów komponentów można znaleźć w powyższym linku.

c.norin
źródło

Przeczytałem to, ale tak naprawdę to nie wyjaśnia dlaczego, brzmi jakby nie było za tym uzasadnienia. Próbuję dowiedzieć się, czy jest jakaś różnica. Używam _extend.less do wszystkich moich zmian, ponieważ wolę spójność niż używanie czegoś, ponieważ „Magento tak powiedział”.

Ben Crook,

@BenCrook, jeśli moje czytanie w ciągu ostatnich kilku dni służy mi dobrze, nie. Jeśli ktoś doda dowolny .lessplik do motywu z tą samą ścieżką, co plik w motywie / module nadrzędnym, jest to przesłonięcie. Prawdopodobnie możesz to zweryfikować, tworząc pusty motyw _moduł w swoim motywie i sprawdzając, czy mają zastosowanie oryginalne style.

Darren Felton

Po a php bin/magento setup:static-content:deploymożesz zajrzeć do pub/static/frontend/<vendor>/<themeName>/<locale>/css/i, pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/i będą pojawiać się dowiązania symboliczne dla plików * .less do twojego motywu lub motywu modułu / rodzica, z którego pochodzi.

Darren Felton

To jest poprawne _module.less zastępuje plik nadrzędny bez pliku, nie ma dziedziczenia ani scalania. Zdaję sobie sprawę, że mógłbym to wyjaśnić w mojej oryginalnej odpowiedzi :)

ok.

@MattCosentino Zdaję sobie sprawę, że ta odpowiedź przychodzi bardzo późno, ale zostawię ją tutaj, na wypadek, gdyby ktoś się na nią natknął: Zwróć uwagę na różnicę między _extends.less a _extend.less. Pliki _extend.less można dodać do dowolnego kontekstu modułu, aby rozszerzyć style z motywu nadrzędnego. _Extends.less znajduje się w katalogu głównym kompozycji i służy do rozszerzania istniejących narzędzi (patrz <projekt> /lib/web/css/docs/source/_utilities.less).

c.norin

Proste wyjaśnienie lub różnica między obydwoma:

_extend.lessJest to sposób na rozszerzenie / modyfikować style dominujące motywy na przykład jesteś zadowolony ze swojego macierzystego tematu Luma i po prostu chcą zmienić styl przycisk w niestandardowym tematu, wszystko co musisz zrobić, to utworzyć nowy plik _buttons_extend.lesspod web/css/sourcew niestandardowym tematu i dostosuj tam style. Zarejestruj ten plik, dodając go do _extend.lesspliku w katalogu motywów.

Co jeśli chcesz rozszerzyć style modułu, np. Moduł kasy, możesz utworzyć _extend.lessplik w folderze modułu motywów, np. Magento_Checkout/web/css/source/_extend.lessI dodać / rozszerzyć styl modułu w nim.

Teraz, jeśli dodałem _module.lessplik do katalogu modułu Magento_Checkout/web/css/source/_module.less, zamierzam zastąpić styl motywów nadrzędnych dla tego modułu, w takim przypadku muszę skopiować _module.lessplik z katalogu modułu motywu nadrzędnego i dokonać modyfikacji tego pliku, w którym to przypadku plik ten będzie _module.lesscałkowicie zamień plik motywów nadrzędnych .

Devtype
źródło

Nigdy nie mówi o Lumie jako rodzicu.

Ezequiel Alba

Znak „ _extends.lessS” na końcu w pustym motywie to plik, w którym utworzono wszystkie klasy, które można rozszerzyć LESSw ramach motywu, bez potrzeby tworzenia nowych komponentów lub struktury modułowej w celu zmiany stylu. -> Dla tych, którzy mi nie wierzą: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less sprawdź plik.

_extend.lessBez S na końcu, jest, kiedy jesteś 99% zadowolony z tego, co rodzic ma tematu i po prostu trzeba zmienić kilka rzeczy, zmienić trochę stylizacji i to wszystko.

Co do tego drugiego, moja osobista opinia, nie używaj go do własnego rozwoju. Później tworzy wielki bałagan. Zachowaj modułowość swojej struktury _module.lessdla każdego modułu, który chcesz dostosować, a na końcu uzyskasz lepszy wynik i łatwiejszy do utrzymania projekt.

Ezequiel Alba
źródło