Как вы переопределяете LESS в пользовательской теме?

35

Большую часть этой недели я провел, пытаясь найти четкое руководство о том, как правильно создать собственную тему и расширить существующие LESS / CSS без необходимости копировать всю magento-blankтему.

Официальная документация дает основы для переопределения переменных, но это имеет ограниченное применение. Существующие руководства, такие как, например, Sonassi, основаны на бета-версии Magento 2.

Исходя из Magento 1, была некоторая кривая обучения, выясняющая, как работает LESS, и как Magento собирает все файлы в CSS. Мне потребовалось некоторое время, чтобы покопаться в руководствах и получить четкий ответ о том, какие файлы нужно изменить и когда, и я подумал, что поделюсь тем, что нашел, чтобы будущие пользователи (и будущие я) могли быстро начать использовать LESS в Magento 2.

andyjv
источник

Ответы:

59

Примечание 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строки, которые, кажется, ни к чему не приводят.

andyjv
источник
1
Отлично, я также согласен с тем, что при создании собственных элементов лучше включать отдельный CSS-файл в заголовок (при условии, что они не загружены на всех страницах). Я не фанат тем Magento, добавляющих все стили на каждую страницу.
Бен Крук
1
Понравился подробный ответ. Просто предостережение о том, что если вы используете инструкции // @magento_import, то невозможно использовать сторонние менее компиляторы, такие как включенные в gulp, что многие из нас делают для увеличения скорости.
Роберт Эггинтон
Отличное объяснение! Миллион благодарностей за это. Я нахожусь на Magento 2.1.0, и мне нужно удалить var/view_preprocessed/css/frontend/VENDOR/THEME/loca_LE/css/*, чтобы заново создать css
Alexandru Bangală
Привет! Я пытаюсь добавить свой новый код этого нового класса для _extends.less в app / design / frontend / Vendor / theme / css / source. Но это не работа. Пожалуйста помощь magento.stackexchange.com/questions/151940/...
Sylon
6
Пожалуйста, Метнион_extend.less
Стиви Дж