Como adicionar um arquivo CSS personalizado no Magento 2

30

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:

43

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

  1. Crie um tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Certifique-se de definir seu aplicativo Magento para o modo de desenvolvedor.
  3. 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>
  1. Aplique seu tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. 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
1
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
1
@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
15

Para adicionar CSS personalizado e carregar por último

  1. Siga a estrutura de diretórios

    app / code / vendor / modulename / view / frontend (para admin adminml) / web / css / filename.css

  2. 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
5

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