Las 2 formas recomendadas por Magento para anular o ampliar los estilos de un tema principal:
1. manera simple
Ampliar:
En su directorio de temas, cree un web/css/source
subdirectorio. (Ya has hecho esta parte) Crea un _extend.less
archivo allí.
De acuerdo con la documentación :
"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".
Anular:
En lugar de crear el _extend.less
archivo, crea un _theme.less
archivo. En este caso, debe copiar todas las variables que necesita del padre _theme.less
, incluidas las que no se modificarán. Entonces haz tus cambios.
Según la documentación , el inconveniente es:
"Debe supervisar y actualizar manualmente sus archivos cada vez que se actualiza _theme.less de los padres".
2. Forma estructurada
Ampliar:
Este método le permite organizar su código de una mejor manera. Sus cambios serán estructurados. En lugar de usar un solo _extend.less
archivo para incluir todos los cambios, crea un archivo extendido para cada componente de la biblioteca de Magento UI que desea cambiar.
Supongamos que desea extender estilos desde los botones y los componentes de navegación. En su directorio de temas, cree 2 archivos: _buttons_extend.less
y _navigation_extend.less
luego agregue los cambios para cada componente en el archivo correspondiente.
Luego crea el _extend.less
archivo agregando este código:
@import '_buttons_extend.less';
@import '_navigation_extend.less';
Anular:
En su tema, cree una copia del archivo correspondiente al componente de interfaz de usuario que desea cambiar ( _buttons.less
, _navigation.less
, etc.) Este archivo se anulará el _buttons.less
del tema de los padres.
Es importante notar la diferencia entre anulación y extensión .
Puede leer más sobre cómo anular y ampliar en esta documentación o sobre CSS en Magento 2 en la Guía del desarrollador de Frontend .