Примечание 1: Это всегда предполагает, что вы расширяете magento-blank.
Примечание 2: <theme-dir>естьapp/design/frontend/Vendor/theme/
Основы: изменение базовых переменных
(для tl; dr, перейдите к заключению)
Большинство руководств, которые я нашел, покрывают этот этап только тем, что пишут в LESS, поэтому я постараюсь сохранить это вкратце. 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 или LESS, и он будет успешно применяться на вашем сайте (но не делайте этого). Я сейчас объясню, как это работает.
Добавление нового файла 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 или LESS:
<theme-dir>/web/css/myStyle.less, Вы можете написать LESS или CSS здесь.
Переопределение существующих стилей
Я обнаружил, что Magento 2 LESS не легко заменить простым добавлением нового файла CSS. И вот тут я начал заблудиться, и я объясню, как Magento 2 находит свои файлы LESS.
По умолчанию 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
Эти файлы включают (импортируют) другие файлы LESS, которые часто включают в себя еще больше файлов LESS. И здесь другие руководства стали мне бесполезны, и я объясню, что нашел, как мог.
Источник / 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 это пустой файл в темах по умолчанию. Продолжайте читать, чтобы узнать, почему это важно отметить.
"Автоматически включенные" файлы 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-элементы, вам может потребоваться создать файл LESS и включить его отдельно в <head>каждую страницу.
В сложных случаях может потребоваться создать новый @importили @magento_import. Вы хотите найти самого низкого дочернего элемента, который имеет смысл для того, что вы делаете, поэтому вы не копируете копирование ненужных файлов и не добавляете запутанные @importстроки, которые, кажется, ни к чему не приводят.