Как в Magento 2 модулю добавить свой файл Less

less
css
макет
модуль
программирование
оформление

(Дмитрий Федюк) #1

Magento 2, в отличие от Magento 1.x, включает встроенный язык стилей высокого уровня Less.
Использование Less вместо Css значительно повышает производительность труда программиста при разработке и сопровождении стилей.
Magento 2 самостоятельно, на лету, умеет компилировать Less в Css благодаря встроенному препроцессору Oyejorge.

Стандатная оформительская тема Magento 2 Luma уже вовсю использует Less, однако стандартные (системные) модули Magento почему-то ещё не используют возможности Less и используют только чистый Css.

Я нашёл способ, как модулю можно подключить свой файл Less, чтобы использовать Less вместо Css.
Для этого вернитесь к моей инструкции полугодовой давности: Как в Magento 2 модулю добавить на страницу свой скрипт JavaScript и правила CSS?
Так вот, если вместо файла core.css создать файл core.less в том же месте, а в макете, тем не менее, вызвать его с расширением *.css (т.е. несуществующий файл!), то Magento 2, оказывается, достаточно интеллектуальна, чтобы догадаться найти одноимённый файл с расширением *.less и молча на лету скомпилировать его в *.css.
Ни один из модулей ядра эту возможность не использует, но она реально работает!


Как в Magento 2 модулю добавить на страницу свой скрипт JavaScript и правила CSS?
Как распределить стили Less модуля между несколькими файлами: директива «//@magento_import»
(Дмитрий Федюк) #2

Обратите внимание, что все стили Less модуля необязательно пихать в один общий файл.
Если стилей мнеого, то разумно распределить их по нескольким файлам: Как распределить стили Less модуля между несколькими файлами: директива «//@magento_import».