Quando o painel do Magento não carrega CSS e JS, a interface administrativa pode se tornar praticamente inutilizável, exibindo uma aparência quebrada, com menus desformatados e funcionalidades que não respondem. Esse problema é mais comum do que parece e pode estar relacionado a permissões de arquivos, cache, problemas de compilação ou configurações incorretas do modo de deploy.
Neste artigo, você vai entender por que isso acontece e aprender como resolver o erro com segurança, passo a passo.
Por que o painel do Magento pode falhar no carregamento de CSS e JavaScript?
Quando os arquivos CSS e JS não são carregados corretamente no admin, a experiência do usuário é drasticamente afetada. Os principais motivos incluem:
- Permissões incorretas nos diretórios
pub/static
ouvar
- Arquivos estáticos não gerados (compilação ausente ou com erro)
- Modo de produção mal configurado
- Configuração incorreta da URL base
- Cache corrompido ou desatualizado
- Falta de conteúdo estático nas línguas padrão (ex: pt_BR)
Identificar a causa correta é fundamental para aplicar a solução adequada.
Passo a passo: como resolver quando o painel do Magento não carrega CSS e JS
1. Verifique as permissões de diretórios
O Magento precisa de permissões corretas para gerar e servir arquivos estáticos. Execute os seguintes comandos no terminal da raiz da instalação:
find var vendor pub/static pub/media app/etc -type f -exec chmod 644 {} \;
find var vendor pub/static pub/media app/etc -type d -exec chmod 755 {} \;
chmod u+x bin/magento
Essas permissões garantem que os arquivos CSS e JS possam ser lidos pelo servidor.
2. Limpe o cache e remova arquivos antigos
Arquivos estáticos quebrados ou desatualizados podem causar o problema. Remova os diretórios temporários e recompile:
rm -rf var/cache/*
rm -rf var/page_cache/*
rm -rf pub/static/*
php bin/magento cache:clean
php bin/magento cache:flush
⚠️ Obs.: O diretório pub/static
será regenerado automaticamente, exceto pelo arquivo .htaccess
, que deve ser mantido. Você pode evitar removê-lo com:
find pub/static -type f ! -name '.htaccess' -delete
3. Recompile os arquivos estáticos
O Magento depende da compilação correta para exibir a interface. Use:
php bin/magento setup:static-content:deploy -f
Inclua o idioma da loja se necessário (ex: pt_BR
, en_US
):
php bin/magento setup:static-content:deploy pt_BR en_US -f
Essa etapa é fundamental no modo de produção, onde os arquivos não são gerados dinamicamente.
4. Verifique o modo de deploy
Confira em qual modo sua loja está:
php bin/magento deploy:mode:show
Se estiver em developer, o Magento gera CSS e JS automaticamente. No modo production, é necessário usar os comandos de compilação manual (setup:di:compile
e static-content:deploy
).
Se quiser mudar para developer
(por exemplo, em ambiente de testes), use:
php bin/magento deploy:mode:set developer
5. Confirme as URLs base
URLs mal configuradas (como sem HTTPS ou domínio errado) impedem o carregamento de arquivos estáticos. Verifique no banco de dados com:
sqlCopiarEditarSELECT * FROM core_config_data WHERE path LIKE '%base%url%';
Ou via admin:
Stores > Configuration > Web > Base URLs
Assegure-se de que as URLs contenham o domínio correto e estejam usando HTTPS se o SSL estiver habilitado.
6. Verifique erros no console do navegador
Abra o painel administrativo e pressione F12 para abrir o console do navegador. Verifique se há erros como:
403 Forbidden
404 Not Found
Mixed content (HTTP e HTTPS)
Essas mensagens podem indicar caminhos incorretos, problemas com permissões ou ausência de arquivos compilados.
Dicas extras para evitar esse problema no futuro
- Use CDN apenas após testes locais com arquivos estáticos
- Sempre execute
setup:static-content:deploy
após atualizações de tema ou idioma - Mantenha o cron configurado corretamente para gerar e limpar caches
- Evite alterações manuais nos diretórios
pub/static
ouvar/
👉 Para problemas de tela branca no admin, veja também:
O que fazer quando o painel do Magento fica em branco
Conclusão: resolvendo falhas de CSS e JS no painel do Magento
Quando o painel do Magento não carrega CSS e JS, é sinal de que algo está errado com o carregamento de arquivos estáticos, permissões ou compilação. Felizmente, com os passos certos — limpar cache, ajustar permissões, compilar conteúdo estático e verificar o modo de deploy — é possível resolver rapidamente.