Substituindo estilos de tema em branco no Magento 2

Como você substitui os estilos de navegação de um tema personalizado ao herdar do tema em branco no Magento 2?

Eu tenho um theme.cssarquivo na minha app/design/frontend/<Vendor>/<theme>/web/csspasta, mas sei que o Magento 2 usa MENOS. Posso substituir facilmente os estilos na minha theme.cssfolha de estilo, mas não quero continuar usando !important.

Além disso, estou usando o Bootstrap 3 e estou assumindo que os estilos do tema em branco substituirão as instruções de estilo correspondentes no Bootstrap. Qual é a melhor maneira de abordar isso?

— Gareth Daine
fonte

Respostas:

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/sourcesubdiretório. (Você já fez esta parte) Crie um _extend.lessarquivo 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.lessarquivo, você cria um _theme.lessarquivo. 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.lesse _navigation_extend.lessadicione as alterações para cada componente no arquivo correspondente.

Então você cria o _extend.lessarquivo 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.lessdo 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 .

— Luis Garcia
fonte

Então, digamos que eu tenho uma pasta Vendor_Namespace, adiciono outra pasta chamada "web / css / source / _extend.less" e o arquivo _extend.less em web / css / source / saberá onde está o arquivo correspondente? Eu entendo que corretamente

— Max

Sim, basta criar o arquivo web/css/source/_extend.lesse colocar seus estilos lá.

— Luis Garcia

Criei um arquivo _extend.less com a importação de um _slider.less: <theme_folder> / css / source / ambos os arquivos estão no mesmo caminho, mas não funcionam, todas as regras em _slider.less não foram encontradas nos arquivos gerados .css, estou em modo de desenvolvedor e executar "php magento configuração: static-content: deploy"

— xzegga

Você excluiu o cache do seu navegador?

— Luis Garcia

Posso substituir <theme_folder> / css / source / lib / variables? como posso alterar uma variável de um arquivo menor? (digamos que eu queira substituir o @ button-background por exemplo) - eu preciso escrevê-lo dentro de _buttons_extend.less ou posso substituir todo o lin / web / css / source / lib / variables

— Goldy

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:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
fonte

Boa maneira de cometer coisas. Mas a questão é "estender" um tema completo e adicionar mais a ele.

— Miguel Felipe Guillen Calo

Não, a questão é sobre substituir.

— Preto

Digamos que você deseja substituir styles-m.css e , em seguida, coloque a cópia web/cssdo seu tema, nomeie- custom-styles-m.css .

Em seguida, use esse código nos seus temas 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>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— Preto
fonte