Diferença entre _module.less e _extend.less

Existe alguma diferença entre estender um tema usando _module.lesse _extend.less? E qual é a melhor prática ao estender um módulo / tema?

Meu primeiro pensamento foi que é melhor usar _module.lessao estilizar um novo módulo e _extend.lessao estender um módulo. Mas Luma usa _module.lessao estender o tema em branco para que a teoria saia pela janela.

A única diferença que vejo entre eles é _module.lessimportada antes da biblioteca responsiva e _theme.lessonde _extend.lessé importada depois deles.

Esta é a ordem em que eles são importados vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

//@magento_import 'source/_extend.less';

— Ben Crook
fonte

Respostas:

A resposta está um pouco oculta nos documentos do Magento:

Estender um tema usando _extend.less é a opção mais simples quando você está satisfeito com tudo o que o tema pai possui, mas deseja adicionar mais estilos.

Leia mais aqui

Use _module.less quando desejar fazer grandes alterações nos estilos de um módulo e use _extend.less para pequenos ajustes. Você encontrará mais exemplos de como substituir estilos de componentes no link acima.

— c.norin
fonte

Eu li isso, mas isso realmente não explica o porquê, parece que não há razão por trás disso. Estou tentando descobrir se há alguma diferença. Eu tenho usado _extend.less para todas as minhas alterações, pois prefiro consistência a usar algo porque 'Magento disse isso'.

— Ben Crook

@BenCrook se minha leitura nos últimos dias me serve bem, não. Se alguém adicionar um .lessarquivo em seu tema com o mesmo caminho que um arquivo no tema / módulo pai, isso será uma substituição. Você provavelmente pode verificar criando um _module.less em branco no seu tema e ver se os estilos originais se aplicam.

— Darren Felton

Depois de um php bin/magento setup:static-content:deploy, você pode olhar para pub/static/frontend/<vendor>/<themeName>/<locale>/css/e pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/e haverá links simbólicos para arquivos * .less para tanto o seu tema, ou o tema do módulo / pai que está vindo.

— Darren Felton

Isso está correto _module.less substitui o arquivo pai menos, não há herança ou mesclagem. Eu percebo que eu poderia ter feito isso mais claro na minha resposta original :)

— c.norin

@MattCosentino Sei que essa resposta chega muito tarde, mas deixarei isso aqui caso alguém se depare com ela: observe a diferença entre _extends.less e _extend.less. Os arquivos _extend.less podem ser adicionados a qualquer contexto de módulo, para estender estilos de um tema pai. O _extends.less está localizado na raiz do tema e é usado para estender os utilitários existentes (consulte <projeto> /lib/web/css/docs/source/_utilities.less).

— precisa saber é

Explicação simples ou diferença entre ambos:

_extend.lessé a maneira de estender / modificar temas pais estilos, por exemplo, você está feliz com o seu tema pai Luma e só quero mudar os estilos de botão em seu tema personalizado, tudo que você precisa fazer é criar um novo arquivo _buttons_extend.lesssob web/css/sourceem seu tema personalizado e ajustar estilos lá. Registre esse arquivo adicionando-o ao _extend.lessarquivo dentro do diretório do tema.

E se você deseja estender os estilos de um módulo, por exemplo, o módulo de checkout, bem, você pode criar um _extend.lessarquivo dentro da pasta do módulo de temas, por exemplo, Magento_Checkout/web/css/source/_extend.lesse adicionar / estender o estilo do módulo.

Agora, se eu adicionar um _module.lessarquivo dentro do diretório do módulo, Magento_Checkout/web/css/source/_module.lesspretendo substituir os estilos dos temas-pai neste módulo. Nesse caso, preciso copiar _module.lesso arquivo ' ' do diretório do módulo do tema-pai e fazer modificações nesse arquivo. Nesse caso, esse arquivo será substitua o _module.lessarquivo de temas pai por completo.

— Devtype
fonte

Ele nunca está falando sobre Luma como pai.

— Ezequiel Alba

O _extends.lessarquivo com um S no final do Tema em Branco é um arquivo no qual eles criaram todas as classes que podem ser estendidas LESSposteriormente no tema, sem a necessidade de criar novos componentes ou estrutura modular para alterações de estilo. -> Para quem não acredita em mim: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less, verifique Arquivo.

O _extend.lesssem o S no final é para quando você estiver 99% satisfeito com o que o tema dos pais tem e você só precisa mudar algumas coisas, mudar alguns estilos e é isso.

Sobre este último, minha opinião pessoal, não o use para seu próprio desenvolvimento. Isso cria uma grande bagunça depois. Mantenha sua estrutura modular _module.lesspara todos os módulos que você deseja personalizar e obterá um resultado melhor e um projeto sustentável no final.

— Ezequiel Alba
fonte