Como adicionar um arquivo CSS personalizado no Magento 2

Existe uma maneira de criar meu próprio arquivo CSS que carrega por último na cascata?

Em caso afirmativo, como e onde adiciono meu arquivo CSS personalizado?

magento2 css

— H. Ferrence
fonte

Respostas:

Para adicionar css personalizados e carregar por último, você deve configurar um tema personalizado.

Crie um tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Certifique-se de definir seu aplicativo Magento para o modo de desenvolvedor.
Adicione as seguintes pastas ao seu tema personalizado

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Crie os seguintes arquivos:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

coloque esse código dentro de default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

Aplique seu tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Implante recursos estáticos (SSH para raiz magento):

php bin/magento setup:static-content:deploy

— Joshua34
fonte

Olá, acabei de fazer isso, mas o arquivo css que adiciono não carrega e, quando inspeciono a página, gera um erro GET para o arquivo, com um 500 (Internal Server Error), você tem alguma idéia do que é pode ser?

— alexcr

Comando CLI para implantar: php bin / magento setup: static-content: deploy

— Joshua34

O que devo colocar nos dois novos arquivos CSS que criei? Apenas CSS puro ??

— 22617 styzzz

@styzzz sim, css cru está ok.

— Joshua34

Sim. Acabei de fazer isso, enviei os arquivos local-m.css e local-l.css para web / css ... limpei o cache e executei o php bin / magento setup: static-content: deploy. Estou no modo de desenvolvedor. Ainda não está pegando eles. Meu default_head_blocks.xml é exatamente como acima. Mas ainda não usando esses stypes I definidos no CSS

— styzzz

Para adicionar CSS personalizado e carregar por último

Siga a estrutura de diretórios

app / code / vendor / modulename / view / frontend (para admin adminml) / web / css / filename.css
Adicione o caminho do arquivo css ao arquivo de layout correspondente, conforme indicado abaixo
```
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
```

— Manish
fonte

Incluir Vendor_Modulenão está funcionando para mim. Removendo-o funcionando bem.

— Saravanan DS

@SaravananDS, você precisa substituir pelo nome do pacote e do módulo.

— Manish

Sim. Depois de substituir apenas pelo meu costume, Vendor_Moduleele não está funcionando.

— Saravanan DS

@ Manish, podemos carregar o arquivo CSS personalizado apenas na página de resultados da pesquisa?

— Jafar pinjar

Aqui não precisa usar o tema filho?

— HaFiz Umer

You can add the media attribute which magento 2 will put to the end of the css in the head section. Setting a width of only 1px will enable it on all devices:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
fonte

obrigado, você salvou meu dia. Eu quero trabalhar com arquivos .less e compilar sempre que os editar.

— bourax

aqui não precisa fazer o tema personalizado primeiro?

— HaFiz Umer

@HaFizUmer Você deve criar um tema personalizado primeiro. Siga as instruções da resposta aceita e use o método que mostro aqui.

— Cypher909 25/06