Diferencia entre _module.less y _extend.less

¿Hay alguna diferencia entre extender un tema usando _module.lessy _extend.less? ¿Y cuál es la mejor práctica al extender un módulo / tema?

Mi primer pensamiento fue que es mejor usarlo _module.lessal diseñar un nuevo módulo y _extend.lessal extender un módulo. Pero Luma usa _module.lesscuando extiende el tema en blanco para que la teoría se haya ido por la ventana.

La única diferencia que puedo ver entre ellos es que _module.lessse importa antes de la biblioteca receptiva y _theme.lessdónde _extend.lessse importa después de ellos.

Este es el orden en que se importan 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
fuente

Respuestas:

La respuesta está algo oculta en los documentos de Magento:

Ampliar un tema usando _extend.less es la opción más simple cuando está satisfecho con todo lo que tiene el tema principal, pero desea agregar más estilos.

Leer más aquí

Use _module.less cuando desee realizar cambios importantes en los estilos de un módulo y use _extend.less para ajustes menores. Encontrará más ejemplos sobre cómo anular estilos de componentes en el enlace de arriba.

— c.norin
fuente

Lo he leído, pero en realidad no explica por qué, parece que no hay ningún razonamiento detrás de esto. Estoy tratando de averiguar si hay alguna diferencia. He estado usando _extend.less para todos mis cambios, ya que prefiero la consistencia a usar algo porque 'Magento lo dijo'.

— Ben Crook

@BenCrook si mi lectura de estos últimos días me sirve, no. Si alguien agregara algún .lessarchivo en su tema con la misma ruta que un archivo en el tema / módulo principal, eso es una anulación. Probablemente pueda verificarlo creando un _module.less en blanco en su tema y ver si se aplican los estilos originales.

— Darren Felton

Después de un php bin/magento setup:static-content:deploy, puede buscar pub/static/frontend/<vendor>/<themeName>/<locale>/css/y pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/habrá enlaces simbólicos para archivos * .less a su tema o al tema del módulo / padre del que proviene.

— Darren Felton

Eso es correcto _module.less anula el archivo principal sin padre, no hay herencia ni fusión. Me doy cuenta de que podría haberlo dejado más claro en mi respuesta original :)

— c.norin

@MattCosentino Me doy cuenta de que esta respuesta llega muy tarde, pero la dejaré aquí en caso de que alguien se tope con ella: tenga en cuenta la diferencia entre _extends.less y _extend.less. Los archivos _extend.less se pueden agregar a cualquier contexto de módulo, para extender estilos desde un tema principal. _Extends.less se encuentra en la raíz del tema y se utiliza para ampliar las utilidades existentes (consulte <proyecto> /lib/web/css/docs/source/_utilities.less).

— c.norin el

Explicación simple o diferencia entre ambos:

_extend.lesses la manera de ampliar / modificar los temas de padres estilos, por ejemplo, usted es feliz con su tema de la matriz Luma y sólo quieren cambiar los estilos de botón en el tema personalizado, todo lo que tiene que hacer es crear un nuevo archivo _buttons_extend.lessbajo web/css/sourceen el tema personalizado y ajustar estilos allí. Registre este archivo agregándolo al _extend.lessarchivo dentro de su directorio de temas.

¿Qué sucede si desea extender los estilos de un módulo, por ejemplo, el módulo de pago? Bueno, puede crear un _extend.lessarchivo dentro de la carpeta del módulo de temas, por ejemplo, Magento_Checkout/web/css/source/_extend.lessy agregar / extender el estilo del módulo allí.

Ahora, si agregué un _module.lessarchivo dentro del directorio de mi módulo, Magento_Checkout/web/css/source/_module.lesstengo la intención de anular el estilo de mis temas principales para este módulo, en cuyo caso necesito copiar _module.lessel archivo ' ' del directorio del módulo de mi tema principal y realizar modificaciones en ese archivo, en cuyo caso este archivo se borrará reemplazar el _module.lessarchivo de temas principales por completo.

— Devtype
fuente

Nunca habla de Luma como padre.

— Ezequiel Alba

El _extends.lesscon una S al final dentro del tema en blanco, es un archivo donde crearon todas las clases que se pueden extender a través de LESSmás adelante en el tema, sin la necesidad de crear nuevos componentes o estructura modular de los cambios de estilo. -> Para aquellos que no me creen: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less revise el archivo.

La _extend.lesssin la S al final, es para cuando estás 99% feliz con lo que el tema de los padres tiene y sólo tiene que cambiar un par de cosas, cambiar algunos estilo y eso es todo.

Sobre este último, mi opinión personal, no lo use para su propio desarrollo. Crea un gran desastre más tarde. Mantenga su estructura modular con _module.lesscada módulo que desee personalizar y obtendrá un mejor resultado y un proyecto sostenible al final.

— Ezequiel Alba
fuente