Angular 13 构建出现警告：CSS属性前带*时提示Expected identifier but found "*"

警告产生原因 #

你代码中使用的*vertical-align: middle这类带*前缀的写法属于IE7及更早版本专属的非标准CSS Hack，不符合W3C官方CSS规范。
Angular 13版本已经正式完全移除了对IE系列浏览器的支持，其内置的CSS编译解析器不再兼容这类老旧的非标准语法，因此构建时会抛出语法校验警告。

解决思路 #

• 方案一：移除老旧IE兼容代码（最推荐）
  如果你的业务已经不需要兼容IE7及更早版本，直接删除所有带*前缀的CSS Hack代码即可，该改动不会影响Chrome、Firefox、Safari、Edge等现代浏览器的样式表现，也可以彻底消除警告。
• 方案二：配置CSS解析器兼容非标准语法
  如果暂时需要保留这类兼容代码，可以通过配置PostCSS的解析规则跳过校验：

1. 安装兼容非标准语法的解析器

npm install postcss-safe-parser --save-dev

2. 在项目根目录新增postcss.config.js文件，写入以下配置：

module.exports = {
  parser: 'postcss-safe-parser',
  plugins: [
    require('autoprefixer')()
  ]
}

• 方案三：替换为标准的IE兼容写法
  如果确实需要保留对IE7的兼容，可以把这类Hack代码移到IE专属的条件注释样式块中，避免和普通标准CSS一起被解析校验。

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