更新 Angular 后接收"unmatched pseudo-class :lang"

Question

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

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

我不明白问题出在哪里。如何解决此错误？我安装了节点14.X.

Answer 1

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

Answer 2

这可能是由于新版本的Angular中不推荐使用:lang()选择器，因此您可以尝试以下操作：

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

Answer 3

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

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

$custom-file-text: ();

此代码放入_bootstrap.scss文件。

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

Answer 4

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

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

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

我不确定这到底是怎么回事，但它为我消除了警告。

Angular 12生产构建警告(MDB4 12(-引导的材料设计

Answer 5

修正了角度为12的bootstrap 5.x。

Answer 6

在导入引导之前使用$custom-file-text: ();

$custom-file-text: (); // --> Warning: 1 rules skipped due to selector errors: .custom-file-input:lang(en) ~ .custom-file-label -> unmatched pseudo-class :lang
@import "~bootstrap/scss/bootstrap";

Answer 7

我在css目录中保存了Bootstrap 4.0.0的本地版本，通过从文件中删除它来解决它(不是最佳做法，但为我解决了警告(

.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}