主页 / coding / 问题 / 79573761
Accepted
light
Asked: 2025-04-15 01:55:39 +0800 CST

Angular CSS 仅注入“打印”

  • 772

我正在使用 Angular 19，并且在执行ng serve时我的所有样式都按预期工作，但是当我构建项目时，它会创建一个 css 包并将其仅注入以用于“打印”。

我的 angular.json 文件中有这个，并且它再次完美地创建了包：

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

我构建的 index.html 文件在处理样式的 head 标签中如下所示：

<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>

如果我用 Chrome 检查 HTML，并从样式表链接中删除media="print"，所有 CSS 都能正确加载，一切正常。否则，我的全局样式就会被破坏。任何帮助我让这个样式在所有媒体上都能正常工作的帮助都将不胜感激，因为我不确定它为什么会这样。

css

2 个回答

  1. Best Answer

    是的，这是因为 Angularmedia="print"在生产构建中添加了一个非阻塞 CSS 加载技巧。它的目的是提高性能，但有时会破坏全局样式。

    修复方法：

    1. 打开你的angular.json
    2. 在 下build > configurations > production，更改此内容：
    "optimization": {
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "scripts": true,
  "fonts": true
},
"extractCss": true
    • 2

  2. 您遇到的问题可能与内联关键 CSS有关。浏览器加载 CSS 时，需要下载、解析并应用到页面内容中。有时，这可能需要一些时间，会让人觉得页面加载时间很长。此外，这还会影响首次内容绘制 (First Contentful Paint)，而这是性能指标之一。因此，此选项允许将关键CSS 内联到 HTML 中。仅内联关键 CSS（会阻止渲染）而不是所有 CSS 资源可以避免加载时间的增加。

    因此，要关闭该选项，您需要更改angular.json文件。据我所知，true自 Angular 12 起，该选项默认设置为 。optimization在您不想使用内联的配置下找到键。在您的情况下，应该是production。请按如下方式更改：

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

    所以，现在使用ng build --prod它构建应该能正常工作了。你可以在这里看到如何延迟加载非关键 CSS ，不过 Angular 的做法略有不同，media="print"正如你在问题中指出的那样。

    • -1

相关问题