更新 Angular 后收到“不匹配的伪类：lang”

Question

更新节点后，我开始收到以下错误：

自定义文件输入：lang(en)~.custom-file-label -> 不匹配的伪类：lang

我不明白问题是什么。我该如何解决这个错误？我安装了节点 14.X。

Answer 1

这可能是因为:lang()选择器在这个新版本的 Angular 中已被弃用，您可以尝试这样做：

[lang="en"] {
    // Your code
}

[lang="fr"] {
    // Your code
}

值得注意的是，CSS 库或编写 CSS 的 JavaScript 组件也可能使用旧的伪类，并且可能需要更新。例如，正如 [@dmitry-kholodov](/sf/users/1121285161/) 所指出的，这个问题可能会出现在 Twitter Bootstrap 4 中，并且可以通过升级到 Twitter Bootstrap Beta 版来修复5. 显然，如果您没有编写所有 CSS，则可能需要评估每个库。 (8认同)

Answer 2

将节点升级到 v12 并将 Angular 从 11 升级到 12 后，我遇到了相同的警告。经过一番挖掘，我:lang(en)在 Bootstrap v4.6.0 中发现了.. 因为它不是错误，而是警告，所以我将忽略它。但摆脱它的唯一方法是等待 Bootstrap 升级。

Answer 3

当我们将应用程序升级到 Angular 12 时，我们也收到了相同的错误（Angular 12 with Bootstrap 4）。

我团队的 UI 开发人员通过覆盖引导选择器解决了这个错误，如下所示：

$custom-file-text: ();

将此代码放入_bootstrap.scss文件。

我希望这个提示对你有帮助。

Answer 4

不久前将我的项目从 Angular 11 更新到 12 后，今天我第一次进行了生产构建。我注意到了 -"unmatched pseudo-class :lang"警告，并在 mdboostrap.com 上找到了有关该主题的线程。一位工作人员推荐了这个解决方案：

在 angular.json 中替换"optimization":true为：

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

我不确定这到底是做什么的，但它消除了我的警告。