Como você substitui LESS em um tema personalizado?

34

Passei a maior parte desta semana tentando encontrar um guia claro sobre como criar corretamente um tema personalizado e estender a existência de MENOS / CSS sem precisar copiar o magento-blanktema inteiro .

A documentação oficial fornece noções básicas sobre a substituição de variáveis, mas isso tem usos limitados. Os guias existentes, como o de Sonassi, por exemplo, parecem baseados em uma versão beta do Magento 2.

Vindo do Magento 1, havia um pouco de uma curva de aprendizado para descobrir como o LESS funciona e como o Magento coleta todos os arquivos no CSS. Demorei um pouco para examinar os guias e obter uma resposta clara de quais arquivos modificar e quando e pensei em compartilhar o que encontrei para que futuros usuários (e futuros eu) pudessem ter um início rápido do uso do LESS no Magento 2.

andyjv
fonte

Respostas:

58

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.

andyjv
fonte
11
Muito bem, também concordo que é uma prática recomendada incluir um arquivo CSS separado na cabeça ao criar seus próprios elementos (desde que não estejam carregados em todas as páginas). Não sou fã dos temas Magento, adicionando todos os estilos a todas as páginas.
Ben Crook
11
Como a resposta detalhada. Apenas uma ressalva de que, se você usar as instruções // @magento_import, não será possível usar menos compiladores de terceiros, como o incluído no gulp, o que muitos de nós estão fazendo para aumentar a velocidade.
Robert Egginton 14/06
Ótima explicação! Milhões de agradecimentos por isso. Eu estou no Magento 2.1.0 e eu tenho que remover var/view_preprocessed/css/frontend/VENDOR/THEME/loca_LE/css/*para que o css a ser re-gerado
Alexandru Bangala
Ei! Eu tento adicionar meu novo código nesta nova classe para _extends.less em app / design / frontend / Vendor / theme / css / source. Mas isso não funciona. Por favor, ajude magento.stackexchange.com/questions/151940/…
Sylon
6
Por favor, metnion #_extend.less
Stevie G