No momento, estou trabalhando em um site Magento 2 para um cliente. Suponha que a marca do meu cliente seja boofar
e que o tema que estou tentando estender / substituir seja foobar
definido 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.less
escrevi 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 !important
qualquer 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?
Respostas:
Você só deseja ter seus estilos no
_theme.less
arquivo se quiser substituir o_theme.less
arquivo 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.less
arquivo é o arquivo certo a ser usado.Isso é um pouco confuso, pois o código que é colocado no
_extend.less
arquivo é 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.css
e osstyles-m.css
arquivos.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.
fonte
registration.php
,theme.xml
ea pasta web. Recompile e selecione-o no administrador e veja o que acontece. Estou pensando que outra coisa está acontecendo, mas isso surgiu na minha cabeça como uma possibilidade.background-color: tomato
como ninguém jamais usaria essa cor) e verificar para ver nos estilos compilados onde a folha está terminando. procure ospub/static/frontend/{package}/{theme}/en_us/css
dois arquivos de estilos. se isso não estiver no final do arquivo, algo está danificando a ordem de carregamento padrão.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.
fonte
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
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:
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.
fonte
Para prioridade mais alta, você pode duplicar o seletor:
fonte
Você precisa substituir o mesmo
.less
arquivo do tema principal que deseja substituir, como se você deseja substituir o_theme.less
arquivo e copiar esse arquivo para o tema secundário aqui (verifique se o mesmo caminho do tema principal)você pode substituir seu css aqui.
fonte
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
fonte