Existe alguma diferença entre estender um tema usando _module.less
e _extend.less
? E qual é a melhor prática ao estender um módulo / tema?
Meu primeiro pensamento foi que é melhor usar _module.less
ao estilizar um novo módulo e _extend.less
ao estender um módulo. Mas Luma usa _module.less
ao estender o tema em branco para que a teoria saia pela janela.
A única diferença que vejo entre eles é _module.less
importada antes da biblioteca responsiva e _theme.less
onde _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';
.less
arquivo 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.php bin/magento setup:static-content:deploy
, você pode olhar parapub/static/frontend/<vendor>/<themeName>/<locale>/css/
epub/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.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.less
sobweb/css/source
em seu tema personalizado e ajustar estilos lá. Registre esse arquivo adicionando-o ao_extend.less
arquivo 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.less
arquivo dentro da pasta do módulo de temas, por exemplo,Magento_Checkout/web/css/source/_extend.less
e adicionar / estender o estilo do módulo.Agora, se eu adicionar um
_module.less
arquivo dentro do diretório do módulo,Magento_Checkout/web/css/source/_module.less
pretendo substituir os estilos dos temas-pai neste módulo. Nesse caso, preciso copiar_module.less
o arquivo ' ' do diretório do módulo do tema-pai e fazer modificações nesse arquivo. Nesse caso, esse arquivo será substitua o_module.less
arquivo de temas pai por completo.fonte
O
_extends.less
arquivo com um S no final do Tema em Branco é um arquivo no qual eles criaram todas as classes que podem ser estendidasLESS
posteriormente 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.less
sem 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.less
para todos os módulos que você deseja personalizar e obterá um resultado melhor e um projeto sustentável no final.fonte