Примітка 1. Це завжди передбачає, що ви продовжуєте magento-blank.
Примітка 2: <theme-dir>єapp/design/frontend/Vendor/theme/
Основи: Зміна базових змінних
(для tl; dr, перейти до висновку)
Більшість путівників, які я знайшов, висвітлюють лише цей крок у тематиці з МЕНШЕЮ, тому спробую тримати цей короткий. Magento 2 має базовий набір змінних, які визначають часто використовувані аспекти теми. Кольори, шрифти, стиль заголовків сторінок тощо визначаються в цих змінних.
У <magento-root>/lib/web/css/source/lib/variables/ви знайдете ряд інтуїтивно іменованих файлів LESS. У кожному з них ви можете знайти значення, присвоєні змінним для багатьох поширених елементів у Magento 2.
Щоб змінити будь-яку з цих змінних, просто створіть файл у <theme-dir>/web/css/source/_theme.less.
Приклад:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Технічно ви можете помістити будь-який CSS або менше, і це буде успішно застосовано до вашого сайту (але цього не робіть). Я поясню, як це працює за мить.
Додавання нового CSS-файлу
Ви можете додати новий CSS на голову всіх сторінок шаблонів.
Створити <theme-dir>/Magento_Theme/layout/default_head_blocks.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/myStyle.css" />
</head>
</page>
А потім ви створюєте файл із новим CSS або МЕНШИМ:
<theme-dir>/web/css/myStyle.less. Тут Ви можете написати менше або CSS.
Переважаючі існуючі стилі
Я виявив, що Magento 2 LESS не легко замінити, просто додавши новий файл CSS. І саме тут я почав губитися, і я поясню, як Magento 2 знаходить свої менші файли.
За замовчуванням Magento 2 включає (і в кінцевому підсумку повертається до) ці файли:
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
Ці файли включають (імпортують) інші менші файли, які часто містять ще менше МАЛЬКО. І саме тут інші путівники стали мені не корисними, і я поясню, що знайшов, як тільки міг.
Джерело / lib Magic
В styles-m.less, є рядок: @import 'source/lib/_responsive.less';. Ви помітите, що source/libв magento-blankтемі немає каталогу . Очевидно, що в кінцевому рахунку стилі Magento 2 повертаються назад <magento-root>/lib/web/css/. Це ти знайдеш source/lib/_responsive.less.
Змінні, якими ви користуєтесь _theme.less, доступні через source/libфайл, імпортований у magento-blankтему. Примітка: _theme.less порожній файл у замовчуванні тем. Продовжуйте читати, щоб дізнатися, чому це важливо зазначити.
"Автоматично включені" менше файлів
Кілька знайдених мені посібників наполягали на тому, що ви можете створити, <theme-dir>/web/css/_styles.lessоскільки Magento автоматично шукає та включає цей файл. Я вважав це поганою порадою.
Якщо ви створите <theme-dir>/web/css/_styles.less, ваш сайт зламається. theme-frontend-blank/web/css/styles-m.lessімпорт _styles.less, який, в свою чергу, імпортує ще 3 .less файли, кожен з яких імпортує ще більше .less файлів.
Якщо ви створюєте _styles.less, ви переосмислите його. Переосмислюючи _styles.less, ви переосмислюєте всі файли, які імпортує, і всі файли, які ті файли імпортують тощо.
Зверніть увагу на _theme.less: Цей файл порожній у темах за замовчуванням, тому його можна просто створити та почати додавати, якщо ви базуєте свою тему за замовчуванням. Однак якщо ви розширюєте тему, яка вже розширює за замовчуванням, шанси_theme.lessвже використовуються. Створення цього знову перекриє це.
Чарівний @magento_import
У styles-m.lessви побачите пару закоментувавши ліній:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Ці рядки насправді не коментуються! Magento 2 має спеціальне керування для ліній, що починаються з //@magento_import. Ці рядки можуть бути включені лише у файли на <theme-dir>/web/css.
Рядки вище вказують Magento 2 включати будь-який файл у тему, що відповідає заданому шаблону. Отже, вищезазначені рядки автоматично включатимуть:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
Додавання імен файлів _widgets.lessі _module.less буде автоматично знайдені і включено, навіть якщо його новий модуль або модуль , який вже не має цей файл.
Майте на увазі, що Magento-Blank включає ці файли для більшості модулів, і якщо ви хочете скористатися цим методом, вам потрібно буде скопіювати та вставити оригінали (якщо ви не виконаєте повне перезапис).
Висновок
(Читайте: не використовуйте _styles.less).
Коли ви хочете змінити CSS елемента, ви хочете зробити все можливе, щоб знайти, для якого файлу визначений цей стиль. Іноді все, що вам потрібно зробити, це змінити змінну в _theme.less. У більшості випадків, я підозрюю, вам просто потрібно скопіювати вставте _module.lessабо _widgets.lessв вашу тему і зробити зміни.
Якщо ви створили новий модуль або маєте нові елементи HTML, можливо, вам знадобиться створити файл МЕНШЕ і включити його окремо до <head>кожної сторінки.
У складних випадках вам може знадобитися створити новий @importабо @magento_import. Ви хочете знайти найнижчу дочку, яка має сенс для того, що ви робите, тому ви не копіюєте вставку непотрібних файлів або додаєте заплутані @importрядки, які, здається, нікуди не ведуть.