Angular 抛出 :host-context([dir=rtl]) .ion-float-start -> 不匹配的伪类 :host-context 警告，一个 angular.json 中有多个项目

Question

我有一个 Angular 项目，用于 2 个具有不同后端的 Web 应用程序。前端是一样的。由于我将第二个项目添加到 angular.json 中，我收到以下警告：

Warning: 10 rules skipped due to selector errors:
  :host-context([dir=rtl]) .ion-float-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-sm-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-sm-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-md-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-md-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-lg-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-lg-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-xl-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-xl-end -> unmatched pseudo-class :host-context

第二个项目中的唯一区别是一些 scss 文件和environment.ts。我不知道这些警告是什么意思以及它们来自哪里。谷歌没有提供任何解决方案。有谁知道如何解决这一问题？

Angular、Ionic 和 Node 都是最新的。

更新：看起来 Ionic 是此警告的原因。 https://github.com/ionic-team/ionic-framework/issues/23298#issuecomment-840598080 我认为可以忽略。

Answer 1

这与称为“内联关键 CSS”的功能有关，该功能是在 Angular 11.1 版本中作为优化引入的。在最初版本中，此功能默认处于禁用状态，但从版本 12 开始，默认启用。

启用该功能后，Angular 在构建过程中会遵循特定的流程：

1. Angular 识别并提取渲染所必需的所有 CSS 资源（称为关键 CSS）。

2. 提取关键 CSS 后，Angular 直接将其嵌入到文件中index.html。

总而言之，这种优化允许 Angular 将关键 CSS 直接内联到文件中index.html，从而增强应用程序的加载和渲染性能。

您可以设置inlineCritical为falseinangular.json以禁用它。

"build": { "options": { "optimization": { "styles": { "inlineCritical": false } } } }