As 2 maneiras recomendadas pelo Magento para substituir ou estender os estilos de um tema pai:
1. Maneira simples
Ampliar:
No diretório do seu tema, crie um web/css/source
subdiretório. (Você já fez esta parte) Crie um _extend.less
arquivo lá.
De acordo com a documentação :
"Estender um tema usando _extend.less é a opção mais simples quando você está satisfeito com tudo o que o tema pai tem, mas deseja adicionar mais estilos."
Sobrepor:
Em vez de criar o _extend.less
arquivo, você cria um _theme.less
arquivo. Nesse caso, você precisa copiar todas as variáveis necessárias do pai _theme.less
, incluindo aquelas que não serão alteradas. Então faça suas alterações.
De acordo com a documentação , a desvantagem é:
"Você precisa monitorar e atualizar manualmente seus arquivos sempre que o _theme.less dos pais for atualizado."
2. Maneira estruturada
Ampliar:
Este método permite que você organize seu código de uma maneira melhor. Suas alterações serão estruturadas. Em vez de usar um único _extend.less
arquivo para incluir todas as suas alterações, você cria um arquivo de extensão para cada componente da biblioteca Magento UI que deseja alterar.
Digamos que você queira estender estilos dos componentes de botão e navegação. No diretório do tema, crie 2 arquivos: _buttons_extend.less
e _navigation_extend.less
adicione as alterações para cada componente no arquivo correspondente.
Então você cria o _extend.less
arquivo adicionando este código:
@import '_buttons_extend.less';
@import '_navigation_extend.less';
Sobrepor:
Em seu tema, crie uma cópia do arquivo correspondente ao componente UI que pretende alterar ( _buttons.less
, _navigation.less
, etc) Este arquivo irá substituir o _buttons.less
do tema pai.
É importante observar a diferença entre substituir e estender .
Você pode ler mais sobre substituição e extensão nesta documentação ou sobre CSS no Magento 2 no Guia do desenvolvedor de front - end .
web/css/source/_extend.less
e colocar seus estilos lá.Eu tive um problema semelhante ao usar o Foundation. A maneira oficial de fazer isso é substituir o arquivo menos do módulo específico e modificar o css. Ele será captado pelo Magento durante a compilação
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html
Por fim, acabei removendo todos os arquivos CSS padrão criados pelo Magento. Achei muito mais fácil escrever CSS personalizado, especialmente usando uma estrutura como o Bootstrap, do que tentar substituir todos os vários módulos. Você pode fazer isso em:
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove
fonte
Digamos que você deseja substituir styles-m.css e , em seguida, coloque a cópia
web/css
do seu tema, nomeie- custom-styles-m.css .Em seguida, use esse código nos seus temas default_head_blocks.xml :
fonte