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.