Diferencia entre _module.less y _extend.less


22

¿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';

Respuestas:


20

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.


1
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

1
@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

1
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

1
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

1
@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

3

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.


Nunca habla de Luma como padre.
Ezequiel Alba

1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.