Nota 1: Isso sempre assumirá que você está estendendo magento-blank.
Nota 2: <theme-dir>éapp/design/frontend/Vendor/theme/
Noções básicas: Alterando variáveis de base
(para tl; dr, pule para conclusão)
A maioria dos guias que encontrei cobre apenas esta etapa do tema com LESS, por isso tentarei mantê-lo breve. O Magento 2 possui um conjunto básico de variáveis que definem aspectos comumente usados de um tema. Cores, fontes, estilo dos títulos das páginas etc. são definidos nessas variáveis.
Em <magento-root>/lib/web/css/source/lib/variables/você vai encontrar um número de arquivos MENOS intuitivamente nomeados. Em cada um deles, você pode encontrar valores atribuídos a variáveis para muitos dos elementos comuns no Magento 2.
Para alterar qualquer uma dessas variáveis, basta criar um arquivo no <theme-dir>/web/css/source/_theme.less.
Exemplo:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Tecnicamente, você pode colocar qualquer CSS ou MENOS aqui, e ele será aplicado com sucesso ao seu site (mas não faça isso). Vou explicar como isso funciona em um momento.
Adicionando novo arquivo CSS
Você pode adicionar um novo CSS ao cabeçalho de todas as suas páginas de modelo.
Criar <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>
E então você cria um arquivo com seu novo CSS ou MENOS:
<theme-dir>/web/css/myStyle.less. Você pode escrever MENOS ou CSS aqui.
Substituindo estilos existentes
Eu descobri que o Magento 2 LESS não é facilmente substituído, basta adicionar um novo arquivo CSS. E foi aqui que comecei a me perder, e explicarei como o Magento 2 encontra seus arquivos MENOS.
Por padrão, o Magento 2 inclui (e finalmente volta a) esses arquivos:
<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
Esses arquivos incluem (importam) outros arquivos MENOS, que geralmente incluem ainda mais arquivos MENOS. E foi aí que outros guias se tornaram inúteis para mim e explicarei o que encontrei da melhor maneira possível.
A fonte / lib Magic
Em styles-m.less, há a linha: @import 'source/lib/_responsive.less';. Você notará que não há source/libdiretório no magento-blanktema. É evidente que os estilos do Magento 2 acabam voltando para <magento-root>/lib/web/css/. É aí que você encontra source/lib/_responsive.less.
As variáveis em que você usa _theme.lessestão disponíveis devido a um source/libarquivo importado no magento-blanktema. Nota: _theme.less é um arquivo vazio nos temas padrão. Continue lendo para saber por que isso é importante notar.
Arquivos MENOS "Incluídos automaticamente"
Alguns guias que encontrei insistiram que você pode criar <theme-dir>/web/css/_styles.lessporque o Magento procura e inclui automaticamente esse arquivo. Achei isso um péssimo conselho.
Se você criar <theme-dir>/web/css/_styles.less, seu site será interrompido. theme-frontend-blank/web/css/styles-m.lessimportações _styles.less, que por sua vez, importam mais 3 arquivos .less, cada um importando ainda mais arquivos .less.
Se você criar um _styles.less, você o substituirá. Ao substituir _styles.less, você está substituindo todos os arquivos importados, todos os arquivos importados e assim por diante.
Nota sobre _theme.less: Este arquivo está vazio nos temas padrão e, portanto, é seguro simplesmente criar e começar a adicionar se você estiver baseando seu tema em um padrão. No entanto, se você estiver estendendo um tema que já estende um padrão, é provável que_theme.lessjá esteja sendo usado. Criar isso novamente irá substituí-lo.
O mágico @magento_import
Em styles-m.lessque você vai ver um par de linhas comentadas:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Essas linhas não foram realmente comentadas! Magento 2 possui tratamento especial para linhas que começam com //@magento_import. Essas linhas podem ser incluídas apenas nos arquivos em <theme-dir>/web/css.
As linhas acima instruem o Magento 2 a incluir qualquer arquivo dentro do tema que segue o padrão especificado. Portanto, as linhas acima incluirão automaticamente:
'<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
Adicionar nomes de arquivos _widgets.lesse _module.less será encontrado e incluído automaticamente, mesmo que seja um novo módulo ou um módulo que ainda não possua esse arquivo.
Esteja ciente de que o Magento-Blank inclui esses arquivos para a maioria dos módulos e, se você quiser usar esse método, precisará copiar e colar os originais (a menos que esteja reescrevendo completamente).
Conclusão
(Leia: não use _styles.less).
Quando você deseja alterar o CSS de um elemento, deseja fazer o melhor possível para encontrar em qual arquivo esse estilo está definido. Às vezes, tudo o que você precisa fazer é alterar uma variável _theme.less. Suspeito que na maioria das vezes você precisará simplesmente copiar e colar o _module.lessou _widgets.lessno seu tema e fazer as alterações.
Se você criou um novo módulo ou possui novos elementos HTML, pode ser necessário criar um arquivo LESS e incluí-lo separadamente em <head>todas as páginas.
Em casos complicados, pode ser necessário criar um novo @importou @magento_import. Você deseja encontrar o filho mais baixo que faz sentido para o que está fazendo, para não copiar e colar vários arquivos desnecessários ou adicionar @importlinhas confusas que parecem não levar a lugar algum.