Angular12升级后出现.k-input-label:dir(rtl)选择器警告且应用无法加载怎么解决

Warning: 1 rules skipped due to selector errors: .k-input-label:dir(rtl) -> unmatched pseudo-class :dir

• .k-前缀是Kendo UI for Angular组件库的专属样式前缀，该选择器是Kendo UI内置的RTL（右到左书写语言）适配样式，你没有手动写过不代表项目依赖的Kendo UI包没有内置该样式。
• Angular 12默认启用的样式解析器未内置对:dir()伪类的支持，解析到不识别的伪类时就会抛出该错误，严重时会阻塞项目启动。

按优先级从高到低选择即可：

方案1：升级适配Angular 12的Kendo UI版本（最推荐） #

旧版Kendo UI未适配Angular 12的样式解析规则，直接升级到对应版本即可解决：

ng update @progress/kendo-angular-ui

升级完成后重新执行ng serve启动项目即可。

方案2：手动添加:dir()伪类解析支持（适合暂时无法升级Kendo UI的场景） #

安装postcss解析插件处理该伪类：

1. 安装依赖

npm install postcss-dir-pseudo-class --save-dev

2. 项目根目录新建postcss.config.js，添加如下配置：

module.exports = {
  plugins: [
    require('postcss-dir-pseudo-class')()
  ]
}

3. 重启ng serve即可。

方案3：排查间接依赖（适合你确认没有主动引入Kendo UI的场景） #

如果你的项目没有直接安装Kendo UI相关包，说明是第三方依赖间接引入了旧版Kendo UI，执行以下命令排查引入路径：

npm ls @progress/kendo-angular-inputs

找到对应的依赖包后，要么升级该依赖到适配Angular 12的版本，要么替换为不依赖Kendo UI的替代包即可。

内容的提问来源于stack exchange，提问作者firdoushj