Anulación de estilos de tema en blanco en Magento 2

¿Cómo anularía los estilos de navegación para un tema personalizado al heredar del tema en blanco en Magento 2?

Tengo un theme.cssarchivo en mi app/design/frontend/<Vendor>/<theme>/web/csscarpeta, pero sé que Magento 2 usa MENOS. Puedo anular fácilmente los estilos dentro de mi theme.csshoja de estilos, pero no quiero tener que seguir usándolos !important.

Además, estoy usando Bootstrap 3, y supongo que los estilos del tema en blanco anularán cualquier instrucción de estilo que coincida en Bootstrap. ¿Cuál es la mejor manera de abordar esto?

— Gareth Daine
fuente

Respuestas:

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/sourcesubdirectorio. (Ya has hecho esta parte) Crea un _extend.lessarchivo 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.lessarchivo, crea un _theme.lessarchivo. 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.lessy _navigation_extend.lessluego agregue los cambios para cada componente en el archivo correspondiente.

Luego crea el _extend.lessarchivo 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.lessdel 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 .

— Luis garcia
fuente

Entonces, supongamos que tengo una carpeta Vendor_Namespace, agrego allí otra carpeta llamada "web / css / source / _extend.less" y el _extend.less-File en web / css / source / sabrá dónde se encuentra el archivo correspondiente. ¿Entiendo eso correctamente

— Max

Sí, solo cree el archivo web/css/source/_extend.lessy ponga sus estilos allí.

— Luis Garcia

He creado un archivo _extend.less con la importación de un _slider.less: <theme_folder> / css / source / ambos archivos están en la misma ruta, pero no funcionan, todas las reglas en _slider.less no se encontraron en los archivos generados por .css, Estoy en modo desarrollador y ejecuto "php magento setup: static-content: deploy"

— xzegga

¿Has eliminado el caché de tu navegador?

— Luis García

¿Puedo anular <theme_folder> / css / source / lib / variables? ¿Cómo puedo cambiar una variable de un archivo menos? (digamos que quiero anular el fondo del botón @, por ejemplo): necesito escribirlo dentro de _buttons_extend.less o puedo anular todos los lin / web / css / source / lib / variables

— Goldy

Tuve un problema similar al usar Foundation. La forma oficial de hacer esto es anular el archivo less del módulo específico y modificar el css allí. Luego será recogido por Magento durante la compilación

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

Finalmente, terminé eliminando todos los archivos CSS predeterminados creados por Magento. Me resultó mucho más fácil escribir CSS personalizado, especialmente usando un marco como Bootstrap, que intentar anular todos los diversos módulos. Puedes hacer esto en:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
fuente

Buena forma de cometer cosas. Pero la pregunta es sobre "extender" un tema completo y agregarle más.

— Miguel Felipe Guillen Calo

No, la pregunta es sobre anular.

— Negro

Digamos que desea anular styles-m.css , luego coloque la copia web/cssde su tema, asígnele el nombre custom-styles-m.css .

Luego use este código en sus temas default_head_blocks.xml :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— Negro
fuente