Разница между _module.less и _extend.less

22

Есть ли разница между расширением темы с помощью _module.lessи _extend.less? И какова лучшая практика при расширении модуля / темы?

Сначала я подумал, что лучше использовать его _module.lessпри стилизации нового модуля и _extend.lessпри расширении модуля. Но Luma использует _module.lessпри расширении пустой темы, чтобы теория ушла в окно.

Единственное различие, которое я вижу между ними, заключается в _module.lessтом, что они импортируются перед отзывчивой библиотекой и _theme.lessкуда как _extend.lessимпортируются после них.

Это порядок, в который они импортируются 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 Бен Крук
источник

Ответы:

20

Ответ несколько скрыт в документах Magento:

Расширение темы с помощью _extend.less - самый простой вариант, когда вы довольны всем, что есть в родительской теме, но хотите добавить больше стилей.

Узнайте больше здесь

Используйте _module.less, когда вы хотите внести значительные изменения в стили для модуля, и используйте _extend.less для небольших изменений. Вы найдете больше примеров того, как переопределить стили компонента в ссылке выше.

c.norin
источник
1
Я читал это, но на самом деле это не объясняет почему, похоже, за этим нет никаких оснований. Я пытаюсь выяснить, есть ли разница. Я использовал _extend.less для всех своих изменений, так как я предпочитаю последовательность, а не что-то, потому что «Magento так сказал».
Бен Крук
1
@BenCrook, если мое чтение за последние несколько дней мне подходит, нет. Если кто-то добавит какой-либо .lessфайл в своей теме с тем же путем, что и файл в родительской теме / модуле, это переопределение. Вы можете проверить это, создав пустой _module.less в своей теме и посмотрев, применимы ли оригинальные стили.
Даррен Фелтон
1
После a php bin/magento setup:static-content:deployвы можете просмотреть pub/static/frontend/<vendor>/<themeName>/<locale>/css/и, pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/и там будут символические ссылки для файлов * .less либо на вашу тему, либо на тему модуля / родителя, из которой она взята.
Даррен Фелтон
1
Это правильно _module.less переопределяет родительский файл меньше, нет наследования или слияния. Я понимаю, что мог бы сделать это более ясным в своем первоначальном ответе :)
c.norin
1
@MattCosentino Я понимаю, что этот ответ приходит очень поздно, но я оставлю его здесь на случай, если кто-то наткнется на него: обратите внимание на разницу между _extends.less и _extend.less. Файлы _extend.less можно добавить в любой контекст модуля, чтобы расширить стили родительской темы. _Extends.less находится в корне темы и используется для расширения существующих утилит (см. <Project> /lib/web/css/docs/source/_utilities.less).
Норин
3

Простое объяснение или разница между ними:

_extend.lessэто способ расширить / изменить родительские ТЕМЫ стилей, например , вы будете счастлив с вашей родительской темой Luma и просто хочет изменить стиль кнопки в вашей теме, все , что вам нужно сделать , это создать новый файл _buttons_extend.lessпод web/css/sourceвашей пользовательскую тему и настроить стили там. Зарегистрируйте этот файл, добавив его в _extend.lessфайл в каталоге вашей темы.

Что делать, если вы хотите расширить стили модуля, например, модуль проверки, хорошо, вы можете создать _extend.lessфайл в папке модуля вашей темы, например, Magento_Checkout/web/css/source/_extend.lessи добавить / расширить стили модуля там.

Теперь, если я добавил _module.lessфайл в каталог моего модуля, Magento_Checkout/web/css/source/_module.lessя намереваюсь переопределить стилизацию моих родительских тем для этого модуля, и в этом случае мне нужно скопировать _module.lessфайл ' ' из каталога модуля моей родительской темы и внести изменения в этот файл, и в этом случае этот файл будет заменить родительский _module.lessфайл тем вообще.

DEVTYPE
источник
Он никогда не говорит о Люме как о родителе.
Иезекииль Альба
1

Символ _extends.less«S» в конце пустой темы представляет собой файл, в котором они создали все классы, которые могут быть расширены LESSпозднее в рамках темы, без необходимости создания новых компонентов или модульной структуры для изменения стиля. -> Для тех, кто не верит мне: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less проверьте файл.

_extend.lessБез S в конце концов, это когда вы 99% довольны тем , что родительская тема имеет и вам просто нужно изменить пару вещей, изменить некоторые стили и это все .

Что касается последнего, мое личное мнение, не используйте его для собственной разработки. Это создает большой беспорядок позже. Сохраняйте свою структуру модульной _module.lessдля каждого модуля, который вы хотите настроить, и вы получите лучший результат и поддерживаемый проект в конце.

Иезекииль Альба
источник