如何解决Angular-CLI打包发布Web应用时的空属性警告问题

嘿，这个警告我之前也碰到过！它本质是CSS语法错误导致的——你的项目里肯定有某个地方写了top: ;这种空值的属性声明，Angular CLI的打包工具（基于Webpack）识别到无效语法就抛出了警告。下面给你一步步解决的思路：

• 第一步：精准定位问题代码
  首先得找到哪里出了问题：

  • 直接在项目全局搜索top: ;、top:''或者top:""这类空值写法，重点检查组件样式文件（.component.css/scss）、全局样式文件（比如styles.css）；
  • 如果搜索不到，试试执行更详细的打包命令：ng build --prod --aot --verbose，这个命令会输出警告对应的具体文件路径，帮你快速定位到出错的地方。

• 第二步：修复无效的CSS声明
  找到对应的代码后，根据实际需求调整：

  • 如果这个top属性是多余的，直接删除即可；
  • 如果是漏写了属性值，补充正确的数值，比如top: 0;、top: 2rem;；
  • 如果是想重置这个属性，推荐用标准CSS写法：top: initial;或者top: unset;，而不是留空。

• 第三步：排查第三方依赖（如果自己代码没问题）
  要是你确认自己的代码里没有这种错误，那大概率是引入的第三方UI库/样式包存在语法问题：

  • 先尝试把对应的依赖包更新到最新版本，看看官方有没有修复这个小问题；
  • 如果更新后还是存在，可以用patch-package这类工具给依赖包打个本地补丁，修改掉里面的无效CSS（别直接改node_modules里的内容，重启项目就会失效）。

• 应急方案：临时屏蔽警告（不推荐）
  如果你暂时没时间根源修复，又不想看到这个警告，可以通过扩展Angular CLI的Webpack配置来忽略它：

  1. 安装@angular-builders/custom-webpack；
  2. 创建自定义Webpack配置文件，在css-loader的选项里添加ignoreWarnings: [/Empty property 'top'/]；
  3. 修改angular.json里的构建配置，使用自定义Webpack配置。
     不过这只是治标不治本的方法，还是建议优先从根源修复语法问题。

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