¿Cómo anular MENOS en un tema personalizado?

35

Pasé la mayor parte de esta semana tratando de encontrar una guía clara sobre cómo crear correctamente un tema personalizado y extender EXISTENCIA MENOS / CSS sin tener que copiar todo el magento-blanktema.

La documentación oficial brinda conceptos básicos sobre la anulación de variables, pero eso tiene usos limitados. Las guías existentes, como la de Sonassi, por ejemplo, parecen basarse en una versión beta de Magento 2.

Viniendo de Magento 1, hubo una pequeña curva de aprendizaje que descubrió cómo funciona MENOS y cómo Magento recopila todos los archivos en CSS. Me llevó un tiempo analizar las guías y obtener una respuesta clara de qué archivos modificar y cuándo, y pensé en compartir lo que encontré para que los futuros usuarios (y mi futuro yo) pudieran comenzar rápidamente a usar LESS en Magento 2.

andyjv
fuente

Respuestas:

59

Nota 1: Esto siempre supondrá que está extendiendo magento-blank.

Nota 2: <theme-dir>esapp/design/frontend/Vendor/theme/

Lo básico: cambio de variables base

(para tl; dr, salte a la conclusión)

La mayoría de las guías que encontré solo cubren este paso en el tema con MENOS, por lo que intentaré mantenerlo breve. Magento 2 tiene un conjunto básico de Variables que definen aspectos comúnmente utilizados de un tema. Los colores, las fuentes, el estilo de los títulos de las páginas, etc. se definen en estas variables.

En <magento-root>/lib/web/css/source/lib/variables/encontrará una serie de archivos MENOS con nombres intuitivos. En cada uno de estos puede encontrar valores asignados a variables para muchos de los elementos comunes en Magento 2.

Para cambiar cualquiera de estas variables, simplemente cree un archivo en <theme-dir>/web/css/source/_theme.less. Ejemplo:

@newPrimary: #1980fe;
@primary__color: @newPrimary;


@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);

Técnicamente, puede poner cualquier CSS o MENOS aquí, y se aplicará con éxito a su sitio (pero no lo haga). Explicaré cómo funciona esto en un momento.

Agregar nuevo archivo CSS

Puede agregar CSS nuevo al encabezado de todas sus páginas de plantilla.

Crear <theme-dir>/Magento_Theme/layout/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>
            <css src="css/myStyle.css" />
        </head>
    </page>

Y luego creas un archivo con tu nuevo CSS o MENOS:

<theme-dir>/web/css/myStyle.less. Puedes escribir MENOS o CSS aquí.

Reemplazar estilos existentes

Descubrí que Magento 2 LESS no se reemplaza fácilmente simplemente agregando un nuevo archivo CSS. Y aquí es donde comencé a perderme, y explicaré cómo Magento 2 encuentra sus MENOS archivos.

Por defecto, Magento 2 incluirá (y finalmente recurrirá a) estos archivos:

<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles

Estos archivos incluyen (importan) otros archivos MENOS, que a menudo incluyen incluso más archivos MENOS. Y aquí es donde otras guías no me ayudaron y explicaré lo que encontré, lo mejor que pude.

La fuente / lib Magic

En styles-m.less, no es la línea: @import 'source/lib/_responsive.less';. Notarás que no hay un source/libdirectorio en el magento-blanktema. Es evidente que los estilos de Magento 2 finalmente recurren a <magento-root>/lib/web/css/. Es ahí donde lo encuentras source/lib/_responsive.less.

Las variables que utiliza _theme.lessestán disponibles debido a un source/libarchivo importado en el magento-blanktema. Nota: _theme.less es un archivo vacío en los temas predeterminados. Continúa leyendo para saber por qué es importante tener esto en cuenta.

Archivos MENOS "incluidos automáticamente"

Algunas guías que encontré insistían en que puedes crear <theme-dir>/web/css/_styles.lessporque Magento busca automáticamente e incluye ese archivo. Esto me pareció un mal consejo.

Si creas <theme-dir>/web/css/_styles.less, tu sitio se romperá. theme-frontend-blank/web/css/styles-m.lessimportaciones _styles.less, que a su vez importa 3 archivos .less más, que importan incluso más archivos .less.

Si crea un _styles.less, lo está anulando. Al anular _styles.less, anula todos los archivos que importa, y todos los archivos que importan esos archivos, y así sucesivamente.

Nota sobre _theme.less: Este archivo está vacío en los temas predeterminados y, por lo tanto, es seguro crearlo y comenzar a agregarlo si está basando su tema en un valor predeterminado. Sin embargo, si está extendiendo un tema que ya extiende un valor predeterminado, es probable_theme.lessque ya se haya utilizado. Crear eso nuevamente lo anulará.

El mágico @magento_import

En styles-m.lessusted verá un par de líneas comentadas:

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

¡Estas líneas no se comentaron realmente! Magento 2 tiene un manejo especial para líneas que comienzan con //@magento_import. Estas líneas solo se pueden incluir en archivos en <theme-dir>/web/css.

Las líneas anteriores indican a Magento 2 que incluya cualquier archivo dentro del tema que siga el patrón dado. Entonces, las líneas anteriores incluirán automáticamente:

'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';

'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';

'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on

Agregar nombres de archivos _widgets.lessy _module.less se encontrará e incluirá automáticamente, incluso si es un módulo nuevo o un módulo que aún no tiene ese archivo.

Tenga en cuenta que Magento-Blank incluye esos archivos para la mayoría de los módulos, y si desea usar este método, deberá copiar y pegar los originales (a menos que esté haciendo una reescritura completa).

Conclusión

(Leer: no usar _styles.less).

Cuando esté buscando cambiar el CSS de un elemento, desea hacer lo mejor que pueda para encontrar en qué archivo se define ese estilo. A veces, todo lo que necesita hacer es cambiar una variable _theme.less. Sospecho que la mayoría de las veces simplemente necesitará copiar y pegar el _module.lesso _widgets.lessen su tema y realizar los cambios.

Si ha creado un nuevo módulo o tiene nuevos elementos HTML, es posible que deba crear un archivo MENOS y tenerlo incluido por separado en <head>cada página.

En casos complicados, es posible que deba crear uno nuevo @importo @magento_import. Desea encontrar el hijo más bajo que tenga sentido para lo que está haciendo, por lo que no está copiando un montón de archivos innecesarios o agregando @importlíneas confusas que parecen no llevar a ninguna parte.

andyjv
fuente
1
Bien hecho, también estoy de acuerdo en que es una mejor práctica incluir un archivo CSS separado en la cabeza al crear sus propios elementos (siempre que no estén cargados en todas las páginas). No soy fanático de los temas de Magento que agregan todos los estilos a cada página.
Ben Crook
1
Como la respuesta detallada. Solo una advertencia de que si hace uso de las instrucciones // @magento_import, entonces no es posible usar compiladores de terceros como el que se incluye en el trago, que muchos de nosotros estamos haciendo para aumentar la velocidad.
Robert Egginton
¡Gran explicación! Millones de gracias por ello. Estoy en Magento 2.1.0 y tengo que eliminarlo var/view_preprocessed/css/frontend/VENDOR/THEME/loca_LE/css/*para que el CSS se vuelva a generar
Alexandru Bangală
¡Oye! Intento agregar mi nuevo código a esta nueva clase para _extends.less a app / design / frontend / Vendor / theme / css / source. Pero esto no funciona. Por favor, ayuda magento.stackexchange.com/questions/151940/…
Sylon
66
Por favor metnion_extend.less
Stevie G