升级Angular 14后出现'unmatched pseudo-class :lang'构建错误如何解决？

算力阿峰

2026-7-25

解决Angular 14 + Bootstrap 4.6.0构建时的:lang伪类错误

这个错误源于Angular 14的构建工具对CSS语法校验更为严格，而Bootstrap 4.6.0中.custom-file-input:lang(en)~.custom-file-label选择器的写法触发了校验规则。以下是几种可行的解决办法：

方法1：升级Bootstrap到4.6.2版本
Bootstrap 4.6.2修复了部分CSS选择器的兼容性问题，执行以下命令升级：
```
npm install bootstrap@4.6.2 --save
```
升级后重新构建项目，大概率能解决该问题。

方法2：覆盖Bootstrap的目标CSS规则
如果不想升级Bootstrap，可在项目自定义CSS/Sass文件中覆盖有问题的选择器：

/* 替换原lang伪类选择器，确保自定义样式在Bootstrap之后引入 */
.custom-file-input[data-lang="en"] ~ .custom-file-label {
  /* 复制Bootstrap原选择器下的样式代码，例如： */
  content: "Choose file...";
}

方法3：调整Angular构建的CSS校验规则
在angular.json的项目build配置中关闭严格的CSS语法校验：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          // 原有样式配置...
          "cssParser": {
            "strict": false
          }
        }
      }
    }
  }
}

注意：此方法会降低CSS语法校验严格性，可能忽略其他潜在问题，谨慎使用。

方法4：移除Bootstrap中该选择器的相关代码
直接找到Bootstrap CSS文件中对应的.custom-file-input:lang(en)~.custom-file-label规则，删除或注释掉；若通过Sass引入Bootstrap，可在Sass变量中禁用自定义文件组件的lang相关样式，或修改对应源码片段。