Angular 19构建后全局CSS仅注入print媒体，求修复方案

问题原因 #

Angular 19默认的CSS优化策略会将非关键全局CSS标记为media="print"，并通过onload事件切换为media="all"，以此优先加载内联的组件关键样式、提升首屏速度。但如果你的全局样式包含首屏必需的样式，这种延迟加载就会导致样式混乱。

解决方法 #

1. 禁用CSS懒加载优化

修改angular.json中项目的build配置，关闭CSS懒加载：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "optimization": {
            "styles": {
              "lazy": false,
              "inlineCritical": true
            }
          }
        }
      }
    }
  }
}

设置lazy: false后，构建生成的CSS链接会直接使用media="all"，不再采用print临时标记。

2. 为全局样式指定媒体类型

在angular.json的styles数组中，给每个全局样式项显式指定media: "all"，覆盖默认优化行为：

"styles": [
  {
    "input": "node_modules/font-awesome/css/font-awesome.css",
    "media": "all"
  },
  {
    "input": "src/custom-theme.scss",
    "media": "all"
  },
  {
    "input": "src/styles.css",
    "media": "all"
  }
]

这种方式可以保留其他优化，同时确保全局样式始终以全媒体类型加载。

3. 排查自定义构建配置干扰

如果项目使用了customWebpackConfig或PostCSS插件，检查是否有配置修改了CSS的媒体类型输出。比如某些压缩插件可能会意外改写media属性，需要调整插件参数。

临时测试方案（不推荐长期使用）

如果需要快速验证，可以手动在src/index.html中添加全局CSS的链接标签，同时在angular.json的styles数组中移除对应项，避免构建重复注入：

<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="src/custom-theme.scss">
<link rel="stylesheet" href="src/styles.css">

注意：这种方式会失去Angular的构建优化能力，仅用于临时排查问题。

内容的提问来源于stack exchange，提问作者light