¿La mejor manera de extender el módulo menos encontrado en web / css / source / module, como _minicart.less?

14

¿Cuál es entonces la mejor manera de extender menos contenido de archivos <module>/web/css/source/module/, por ejemplo Magento_Checkout/web/css/source/module/_minicart.less?

Suponiendo que a

A) ANULACIÓN

  1. relacionado con el tema menos , debe crear (o copiar) menos con el mismo nombre del tema principal y ponerlo en su tema de esta manera theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. módulo específico menos debe crear (o copiar) un menos con el mismo nombre del tema principal y ponerlo en su tema de esta manera theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib menos debe crear (o copiar) un contenido menor con el mismo nombre en la carpeta de la biblioteca y ponerlo en su tema de esta manera magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

y para

B) EXTENDER

  1. menos relacionado con el tema , debe crear un archivo _extend.less en su tema agregando _extend en el nombre como este <your-theme>/web/css/source/_navigation_extend.lesspara extender theme-frontend-blank/web/css/source/_navigation.lessY registrar ese archivo con la directiva @import en _extend.less del contenido del tema en web / css / source ->@import "_navigation_extend.less"
  2. módulo específico menos debe crear un archivo _extend.less en la ruta del módulo de tema como este <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessque extiende el _module.less original de Magento_CatalogSearch
  3. UI lib less debe crear un contenido menor con el mismo nombre en la carpeta de la biblioteca agregando _extend en el nombre como este <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lesspara extender magento2-base/lib/web/css/source/lib/_buttons.lessY registrar ese archivo con la directiva @import en _extend.less del contenido del tema en web / css / source - >@import "lib/_buttons_extend.less"

La teoría debe sugerirle que cree un _minicart_extend.less pero no funciona automáticamente. ¿Quizás debería importar ese archivo en _extend.less de ese módulo como se explica en B1 o B3?

¿Y por qué estos componentes que se extienden menos no se incluyen automáticamente en el análisis de css si esta es la forma correcta de extenderlos, pero deben importarse en _extend.less?

(Aquí viene también otra pregunta: ¿cuáles son las diferencias entre web/css/source/lib/_buttons.lessy web/css/source/_buttons.less? 😕)

Estoy un poco confundido. Espero que alguien pueda ayudarme.

Perdón por este largo texto.


Fuentes:

Loreena
fuente

Respuestas:

12

Según las convenciones de Magento 2, la mejor manera de extender los estilos de módulos es la siguiente:

Si queremos extender estilos desde Magento_Checkout/web/css/source/module/_minicart.lessnecesitamos tener 2 archivos

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lessdonde importaremos nuestras extensiones personalizadas. En este caso@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less que contendrá nuestros estilos personalizados.

La razón por la que necesitamos un _extend.lessarchivo para especificar @importses porque Magento solo incluye automáticamente un_extend.less por módulo. Verificar y agregar todo *_extend.lessautomáticamente llevará mucho tiempo y es por eso que no se implementó así.

En Magento, los archivos de temas en blanco responsables de minicart se encuentran en /vendor/magento/theme-frontend-blank/Magento_Checkout/

También podríamos agregar todos nuestros estilos personalizados directamente en _extend.less. Sin embargo, dividirlos en archivos más pequeños y específicos, como en el módulo original, mantiene el código claro y mejor organizado. Esa es también la forma recomendada según los estándares de Magento 2.

Jalogut
fuente
Gracias @ jalogut! Por lo tanto, también podría llamar a "_minicart_extend.less" como "foobar.less" y no habría ninguna diferencia, ya que es lo que importa en _extend.less lo que cuenta. Agregar "_extendd.less" al nombre del componente es solo una convención para ayudarlo a mantener todo más claro.
Loreena
Exactamente, esa es la idea.
Jalogut
@Jalogut, ¿estás seguro de que dicen esto "Verificar y agregar todo * _extend.less automáticamente llevará mucho tiempo" o es tu suposición? debido a la OMI seguro de que tome un poco más, pero no mucho, como a los desarrolladores hacer hacer esto cada vez que quieren personalizar (más un poco de confusión en un primer momento)
medmek