Magento 2 - Substituindo CSS sem usar! Important em qualquer lugar

No momento, estou trabalhando em um site Magento 2 para um cliente. Suponha que a marca do meu cliente seja boofare que o tema que estou tentando estender / substituir seja foobardefinido como o tema pai usandofrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Depois, frontend/Foobarthemes/boofar/web/css/source/_theme.lessescrevi o código CSS que desejo substituir. Eu também tentei isso com _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Sou forçado a usar !importantqualquer coisa para trabalhar aqui. Nenhuma das fontes e texto funciona no código acima.

Não entendi o fluxo de trabalho do front-end do Magento 2 corretamente?

Você só deseja ter seus estilos no _theme.lessarquivo se quiser substituir o _theme.lessarquivo do tema pai . Para esse arquivo, apenas um deles é carregado e sempre será o tema selecionado se o arquivo existir lá. A partir daí, ele usará o esquema de fallback para encontrar esse arquivo e usá-lo.

Portanto, no seu caso, usar o _extend.lessarquivo é o arquivo certo a ser usado.

Isso é um pouco confuso, pois o código que é colocado no _extend.lessarquivo é carregado pela última vez quando o Magento compila todos os estilos existentes no site. Então, eu estou querendo saber se há algo mexendo com a ordem de carregamento.

Examinando a maneira como você o configurou, tente configurar seu tema em um espaço para nome diferente e não no mesmo tema. Isso pode não resolver o problema, pois a maneira como você configurou o tema é a mesma que o Magento configurou o tema luma / em branco. Mas, por todo o trabalho que fiz, tenho meu namespace de venda, que será estendido a partir de um tema de terceiros ou de luma / blank.

A próxima coisa a tentar seria agrupar seu código nas consultas de mídia incorporadas. Eu entrar em mais detalhes aqui , mas basicamente ele pára de seus estilos de ser carregado duas vezes nos styles-l.csse os styles-m.cssarquivos.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

A partir daí, tudo se resume à especificidade do CSS. Se houver algo mais alto que o seu, você precisará ser mais específico na definição de classe / ID nos estilos. Você pode postar uma imagem da estrutura do DOM para mostrar o que você está alvejando e o que está ultrapassando o que você está almejando.

Se você conseguir aplicar seus estilos no arquivo _extend.less, isso significa que você tem problemas com a especificidade do css. Como o Magento2 usa menos compilação, a maioria dos estilos é muito específica. Para substituí-los, seus seletores de estilos devem ser mais ou igualmente específicos. Não publicarei detalhes do próprio conceito aqui, pois há muitos artigos on-line.

Se você estiver usando a configuração LESS padrão, verifique se ALL ALL LESS está gravado nas consultas de mídia M2 LESS. Caso contrário, você terminará com CSS duplicado e provavelmente com problemas de especificidade.

Tudo isso se resume à especificidade e à ordem de carregamento; seu CSS deve ser carregado após os temas (ou módulos) principais, para anular isso, tudo o que você precisa fazer é atender à especificidade deles.

Por exemplo, se o tema pai usa

.parent-selector .selector {
    ...
}

Você precisará escrever o mesmo seletor, se por algum motivo isso não funcionar, basta adicionar outro seletor antes dele. Uma maneira fácil é adicionar o corpo antes dele, pois abrange todos os seletores e adiciona especificidade. Igual a:

body .parent-selector .selector {
    ...
}

Este artigo contém algumas informações boas sobre a especificidade do CSS.

Como alternativa, você pode substituir o arquivo inteiro

Se você estiver fazendo muitas personalizações, é melhor substituir o arquivo inteiro em vez de estender. Para fazer isso, adicione o arquivo ao seu tema usando o mesmo caminho e nome de arquivo.

Para prioridade mais alta, você pode duplicar o seletor:

  .home.home {
    display: none;
  }

Você precisa substituir o mesmo .lessarquivo do tema principal que deseja substituir, como se você deseja substituir o _theme.lessarquivo e copiar esse arquivo para o tema secundário aqui (verifique se o mesmo caminho do tema principal)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

você pode substituir seu css aqui.

Injetar seus arquivos CSS personalizados é melhor.

Leia mais: Como adicionar um arquivo CSS personalizado no Magento 2

E Mage Docs: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Lembre-se de compilar usando grunt / less para processar o css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html