2 способи, рекомендовані Magento для зміни або розширення стилів з батьківської теми:
1. Простий спосіб
Розширити:
У своєму тематичному каталозі створіть web/css/source
підкаталог. (Ви вже зробили цю частину) Створіть там _extend.less
файл.
Відповідно до документації :
"Розширення теми за допомогою _extend.less - це найпростіший варіант, коли ви задоволені всім, що має головна тема, але хочете додати більше стилів."
Заміна:
Замість створення _extend.less
файлу ви створюєте _theme.less
файл. У цьому випадку вам потрібно скопіювати всі необхідні змінні з батьківського _theme.less
, в тому числі ті, які не будуть змінені. Потім внесіть свої зміни.
Згідно з документацією , недолік:
"Вам потрібно відстежувати та вручну оновлювати свої файли кожного разу, коли оновлення _theme.less батьків не оновлюється."
2. Структурований спосіб
Розширити:
Цей спосіб дозволяє краще організувати свій код. Ваші зміни будуть структуровані. Замість того, щоб використовувати один _extend.less
файл для включення всіх змін, ви створюєте розширений файл для кожного компонента з бібліотеки Magento UI, який ви хочете змінити.
Скажімо, ви хочете розширити стилі з компонентів кнопки та навігації. У своєму тематичному каталозі створіть 2 файли: _buttons_extend.less
і _navigation_extend.less
, потім додайте свої зміни для кожного компонента у відповідний файл.
Потім ви створюєте _extend.less
файл, додаючи цей код:
@import '_buttons_extend.less';
@import '_navigation_extend.less';
Заміна:
У своїй темі створіть копію файлу, що відповідає компоненту інтерфейсу, який ви хочете змінити ( _buttons.less
, _navigation.less
і т. Д.) Цей файл замінить _buttons.less
батьківську тему.
Важливо помітити різницю між перехопленням та розширенням .
Докладніше про переосмислення та розширення можна прочитати в цій документації або про CSS у Magento 2 у Посібнику розробника Frontend .