Різниця між _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';

Відповіді:


20

Відповідь дещо прихована в документах Magento:

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

Детальніше читайте тут

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


1
Я читав це, але насправді це не пояснює, чому це здається, що за цим немає ніяких міркувань. Я намагаюся з’ясувати, чи є якась різниця. Я використовую _extend.less для всіх моїх змін, оскільки віддаю перевагу послідовності використанню чогось, тому що "Magento сказав так".
Бен Крук

1
@BenCrook, якщо моє читання за останні кілька днів слугує мені правильно, ні. Якщо хтось повинен додати будь-який .lessфайл у свою тему тим самим шляхом, що і файл у батьківській темі / модулі, це є переопрацюванням. Ви, ймовірно, могли перевірити, створивши порожню _module.less у своїй темі та побачивши, чи застосовуються оригінальні стилі.
Даррен Фелтон

1
Після того 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).
c.norin

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файл батьківських тем взагалі.


Він ніколи не говорить про Луму як про батька.
Езекіль Альба

1

The _extends.lessS в кінці в рамках Blank Theme - це файл, де вони створили всі класи, які можна продовжити 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для кожного модуля, який ви хочете налаштувати, і ви отримаєте кращий результат та підтриманий проект в кінці.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.