A melhor maneira de estender o módulo menos encontrado em web / css / source / module, como _minicart.less?

14

Qual é então a melhor maneira de estender menos conteúdo de arquivos <module>/web/css/source/module/, como por exemplo Magento_Checkout/web/css/source/module/_minicart.less?

Supondo que

A) ANULAR

  1. menos relacionado ao tema, você deve criar (ou copiar) um menos com o mesmo nome do tema pai e colocá-lo no seu tema assim theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. menos específico do módulo, você deve criar (ou copiar) um menos com o mesmo nome do tema pai e colocá-lo no seu tema assim theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib menos, você deve criar (ou copiar) um menos com o mesmo conteúdo na pasta da biblioteca e colocá-lo no seu tema assim magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

e para

B) ESTENDER

  1. menos relacionado ao tema, você deve criar um arquivo _extend.less no seu tema, adicionando _extend no nome como este <your-theme>/web/css/source/_navigation_extend.lesspara estender theme-frontend-blank/web/css/source/_navigation.lessE registrar esse arquivo com a diretiva @import no _extend.less do conteúdo do tema em web / css / source ->@import "_navigation_extend.less"
  2. menos específico do módulo, você deve criar um arquivo _extend.less no caminho do módulo do tema como este, <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessque estende o _module.less original do Magento_CatalogSearch
  3. Na interface do usuário lib menos, você deve criar um conteúdo less com o mesmo nome na pasta da biblioteca, adicionando _extend no nome dessa forma <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lesspara estender magento2-base/lib/web/css/source/lib/_buttons.lessE registrar esse arquivo com a diretiva @import no _extend.less do conteúdo do tema em web / css / source - >@import "lib/_buttons_extend.less"

A teoria deve sugerir que você crie um _minicart_extend.less, mas não funciona automaticamente. Talvez você deva importar esse arquivo no _extend.less desse módulo, como explicado em B1 ou B3?

E por que esses componentes que estendem menos não são incluídos automaticamente na análise do css, se esta é a maneira correta de estendê-los, mas deve ser importada no _extend.less?

(Aqui também vem outra pergunta: quais são as diferenças entre web/css/source/lib/_buttons.lesse web/css/source/_buttons.less? 😕)

Estou um pouco confuso. Espero que alguém possa me ajudar.

Desculpe por este texto longo.


Fontes:

Loreena
fonte

Respostas:

12

De acordo com as convenções do Magento 2, a melhor maneira de estender os estilos de módulo é a seguinte:

Se quisermos estender estilos Magento_Checkout/web/css/source/module/_minicart.less, precisamos ter 2 arquivos

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lessonde importaremos nossas extensões personalizadas. Nesse caso@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less que conterão nossos estilos personalizados.

A razão pela qual precisamos de um _extend.lessarquivo para especificar o @importsé porque o Magento inclui apenas automaticamente um _extend.lesspor módulo. Verificar e adicionar tudo *_extend.lessautomaticamente consumirá muito tempo e é por isso que não foi implementado dessa maneira.

No Magento Blank, os arquivos de tema responsáveis ​​pelo minicart estão localizados em /vendor/magento/theme-frontend-blank/Magento_Checkout/

Também podemos adicionar todos os nossos estilos personalizados diretamente ao _extend.less. No entanto, dividi-los em arquivos menores e específicos, como no módulo original, mantém o código claro e melhor organizado. Essa também é a maneira recomendada, de acordo com os padrões Magento 2.

Jalogut
fonte
Obrigado @Jalogut! Então, eu também poderia chamar "_minicart_extend.less" como "foobar.less" e não faria diferença, pois é o que você importa @ _extend.less que importa. Adicionar "_extendd.less" ao nome do componente é apenas uma convenção para ajudar você a manter tudo mais claro?
Loreena
Exatamente, essa é a ideia.
Jalogut 6/17
@Jalogut, você tem certeza deles dizendo isso "Verificar e adicionar todos os * _extend.less automaticamente consumirá muito tempo" ou é seu palpite? porque IMO certeza que demorar um pouco mais, mas não muito, como para os desenvolvedores a fazer isso cada vez que quiser personalizar (mais uma pequena confusão em primeiro lugar)
medmek