Лучший способ расширить модуль менее найден в web / css / source / module, например _minicart.less?


14

Каков тогда лучший способ расширить содержание файлов <module>/web/css/source/module/, например Magento_Checkout/web/css/source/module/_minicart.less?

Предполагая, что

А) ПЕРЕЗАГРУЗИТЬ

  1. меньше связанных с темой вы должны создать (или скопировать) меньшее с тем же именем родительской темы и поместить его в свою тему следующим образом theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. для конкретного модуля меньше вы должны создать (или скопировать) меньшее с тем же именем родительской темы и поместить его в свою тему следующим образом theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. Если пользовательский интерфейс меньше, вы должны создать (или скопировать) содержимое с тем же именем в папке библиотеки и поместить его в свою тему следующим образом magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

и к

Б) РАСШИРЯТЬ

  1. Тем не менее, вы должны создать файл _extend.less в своей теме, добавив _extend в имя, подобное этому, <your-theme>/web/css/source/_navigation_extend.lessчтобы расширить theme-frontend-blank/web/css/source/_navigation.lessИ зарегистрировать этот файл с помощью директивы @import в _extend.less содержимого темы в web / css / source ->@import "_navigation_extend.less"
  2. Для конкретного модуля меньше вы должны создать файл _extend.less в пути к модулю темы, как этот, <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessкоторый расширяет оригинальный _module.less Magento_CatalogSearch
  3. Для того, чтобы пользовательский интерфейс был меньше, вы должны создать меньше с тем же именем в папке библиотеки, добавив _extend в это имя, <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lessчтобы расширить magento2-base/lib/web/css/source/lib/_buttons.lessИ зарегистрировать этот файл с помощью директивы @import в _extend.less содержимого темы в web / css / source - >@import "lib/_buttons_extend.less"

Теория должна предлагать вам создать _minicart_extend.less, но она не работает автоматически. Может быть, вам следует импортировать этот файл в _extend.less этого модуля, как описано в B1 или B3?

И почему эти компоненты, расширяющиеся меньше, не включаются автоматически в синтаксический анализ css, если это правильный способ их расширения, а должны импортироваться в _extend.less?

(Здесь также возникает другой вопрос: в чем разница между web/css/source/lib/_buttons.lessи web/css/source/_buttons.less? 😕)

Я немного смущен. Надеюсь, кто-нибудь может мне помочь.

Извините за этот длинный текст.


Источники:

Ответы:


12

Согласно соглашениям Magento 2, лучший способ расширения стилей модуля заключается в следующем:

Если мы хотим расширить стили, у Magento_Checkout/web/css/source/module/_minicart.lessнас должно быть 2 файла

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lessкуда мы будем импортировать наши пользовательские расширения. В таком случае@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less это будет содержать наши пользовательские стили.

Причина, по которой нам нужен _extend.lessфайл для указания, @importsзаключается в том, что Magento автоматически включает только _extend.lessмодуль. Проверка и добавление всего *_extend.lessавтоматически будет занимать много времени, и поэтому он не был реализован таким образом.

В теме Magento Blank файлы, отвечающие за миникарту, находятся в /vendor/magento/theme-frontend-blank/Magento_Checkout/

Мы также можем добавить все наши собственные стили прямо в _extend.less. Однако разбиение их на более мелкие и специфичные файлы, как в исходном модуле, делает код ясным и лучше организованным. Это также рекомендуемый способ в соответствии со стандартами Magento 2.


Спасибо @Jalogut! Таким образом, я мог бы также назвать «_minicart_extend.less» как «foobar.less», и это не имело бы никакого значения, поскольку учитывается то, что вы @import в _extend.less. Добавление «_extendd.less» к имени компонента - это просто соглашение, которое поможет вам все прояснить?
Лорина

Точно, это идея.
Джалогут

@Jalogut Вы уверены, что они говорят это «Проверка и добавление всех * _extend.less автоматически займет много времени» или это ваше предположение? потому что IMO уверен, что это займет немного больше, но не так много, чтобы заставить разработчиков делать это каждый раз, когда они хотят настроить (плюс небольшая путаница вначале)
medmek
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.