Angular库添加组件样式后构建报PostCSS插件未知错误、Safari版本不识别

根因定位 #

报错由两个关联问题触发：

1. PostCSS版本不兼容：项目中使用的PostCSS 8.3.11与依赖的postcss-preset-env 7.0.39版本不匹配，触发工具链异常
2. browserslist数据库版本过低：低版本的浏览器支持数据库中未收录Safari 15.1版本号，被异常的PostCSS工具链调用后触发识别报错

解决步骤 #

• 第一步：处理PostCSS版本冲突
  执行命令卸载旧版本依赖，再安装匹配的版本组合：

  npm uninstall postcss postcss-preset-env
  npm install postcss@8.4.x postcss-preset-env@8.x --save-dev
  

  如果你使用yarn/pnpm，替换对应包管理命令即可。

• 第二步：更新browserslist数据库
  执行命令更新本地浏览器版本识别库，解决Safari版本无法识别问题：

  npx update-browserslist-db@latest
  

  若执行后仍有版本识别报错，可以手动修改项目根目录下的.browserslistrc文件，明确指定Safari支持范围：

  # 原有其他配置保留，将Safari相关配置修改为以下内容
  safari >=14
  

• 第三步：清理缓存重建
  删除项目中的node_modules文件夹、package-lock.json/yarn.lock/pnpm-lock.yaml锁文件，重新执行依赖安装后再运行构建命令验证：

  npm install
  ng build some-lib --configuration development
  

如果你的项目有自定义PostCSS配置，还需要检查postcss.config.js中postcss-preset-env的配置参数，移除与当前版本不兼容的配置项即可。

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