Angular 12升级至14后postcss-loader警告问题求助

问题根源 #

警告来自autoprefixer工具，提示CSS中使用的start属性值浏览器支持度不一致，建议替换为兼容性更好的flex-start。

解决方案 #

1. 修改自有代码 #

• 打开src/styles.scss，定位到警告提示的第12061行附近，查找是否存在类似以下的CSS代码：

  .target-class {
    justify-content: start;
    /* 或 align-items: start; 等使用start值的属性 */
  }
  

• 将所有start替换为flex-start，保存后重新运行项目即可消除警告。

2. 处理第三方依赖库问题 #

如果警告来自第三方依赖（如bootstrap、ngx-bootstrap等）：

• 升级依赖版本：尝试将相关依赖升级到更高版本，比如你当前使用的bootstrap 5.1.3，可升级至5.2.x及以上版本，新版本大概率已修复该兼容性问题。
• 忽略警告：若不想升级依赖，可通过配置autoprefixer跳过此警告：
  在项目根目录创建postcss.config.js文件（无则新建），添加以下配置：

  module.exports = {
    plugins: {
      autoprefixer: {
        ignoreWarnings: [/start value has mixed support/]
      }
    }
  };
  

  配置完成后重启项目，警告将不再显示。

3. 验证修改 #

执行ng serve或ng build命令，确认警告已消失。

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