Início / coding / Perguntas / 79573761
Accepted
light
Asked: 2025-04-15 01:55:39 +0800 CST

Angular CSS injetando apenas para "imprimir"

  • 772

Estou usando o Angular 19 e todo o meu estilo funciona conforme o esperado ao fazer um ng serve , mas quando eu construo o projeto, ele cria um pacote do meu css e o insere apenas para "imprimir".

Tenho isso no meu arquivo angular.json e, novamente, ele cria o pacote perfeitamente:

"styles": [
  "node_modules/font-awesome/css/font-awesome.css",
  "src/custom-theme.scss",
  "src/styles.css"
]

Meu arquivo index.html criado se parece com isso nas tags head que tratam do estilo:

<style>...all component styling...</style>
<link rel="stylesheet" href="styles-QO6MI7ZW.css" media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="styles-QO6MI7ZW.css">
</noscript>

Se eu inspecionar o HTML com o Chrome e remover o media="print" do link da folha de estilo, todo o meu CSS carrega corretamente e tudo fica bem. Caso contrário, meus estilos globais ficam bagunçados. Qualquer ajuda para que esse estilo funcione para todas as mídias seria bem-vinda, porque não sei por que ele está fazendo o que está fazendo.

css

2 respostas

  1. Best Answer

    Sim, isso acontece porque o Angular adiciona media="print"builds de produção como um truque de carregamento CSS não bloqueante. O objetivo é melhorar o desempenho, mas às vezes quebra o estilo global.

    Para consertar:

    1. Abra seuangular.json
    2. Em build > configurations > production, altere isto:
    "optimization": {
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "scripts": true,
  "fonts": true
},
"extractCss": true
    • 2

  2. O problema que você tem provavelmente está relacionado ao CSS crítico embutido . Quando o navegador carrega CSS, ele precisa baixá-lo, analisá-lo e aplicá-lo ao conteúdo da página. Às vezes, isso pode levar tempo e dar a impressão de que o tempo de carregamento da página é longo. Além disso, isso afetaria o First Contentful Paint , que é uma das métricas de desempenho. É por isso que esta opção permite o CSS crítico embutido no HTML. O uso apenas do CSS crítico (que bloqueia a renderização) e não de todos os recursos CSS evita o aumento do tempo de carregamento.

    Então, o que você precisa fazer para desativar essa opção é alterar angular.jsono arquivo. Pelo que eu sei, essa opção está definida truepor padrão desde o Angular 12. Encontre optimizationa chave em configurações nas quais você não deseja usar inlining. No seu caso, seria production. Altere-a de acordo com isto:

    "optimization": {
  "scripts": true,
  "fonts": {
    "inline": true
  },
  "styles": {
    "minify": true,
    "inlineCritical": false
  }
}

    Então, agora, quando você construir, ng build --prodele deve funcionar como esperado. Você pode ver como adiar o carregamento de CSS não crítico aqui , embora o Angular faça isso de forma um pouco diferente, media="print"como você apontou na sua pergunta.

    • -1

relate perguntas