执行ng serve时CSS加载报错：canMerge.js调用undefined的toLowerCase方法

问题引发原因 #

• 这个错误是Angular内置的CSS压缩工具css-minimizer-webpack-plugin抛出的，核心原因是工具在解析CSS生成AST节点时，出现了没有value属性的异常节点，而canMerge.js中的hasInherit方法没有做空值判断，直接对node.value调用toLowerCase()，触发了类型错误。
• 常见的触发场景有三类：
  1. 项目本地的CSS/LESS/SCSS代码存在语法缺陷，比如写了color: ;这种缺属性值的规则，或者使用了工具未兼容的CSS新语法
  2. 引入的第三方依赖包中包含不符合规范的CSS样式，压缩工具解析时生成了残缺的AST节点
  3. 项目当前使用的css-minimizer-webpack-plugin或其底层依赖cssnano存在版本兼容Bug，对特殊CSS语法的解析逻辑有漏洞

解决方案 #

临时规避方案 #

开发环境下不需要压缩CSS的话，可以直接关闭CSS压缩功能快速恢复服务：在angular.json的对应构建配置项中添加如下配置，重启ng serve即可生效：

{
  "architect": {
    "build": {
      "options": {
        "optimization": {
          "styles": {
            "minify": false
          }
        }
      }
    }
  }
}

永久修复方案 #

1. 排查修复样式语法问题：优先检查最近新增/修改的样式代码，确认是否存在缺值、语法错误的规则；如果有新增引入的第三方样式，可以先注释引入代码验证问题是否消失。
2. 升级依赖版本：将Angular CLI、css-minimizer-webpack-plugin升级到最新稳定版，这类常见的兼容Bug大多已经在后续版本修复。
3. 给依赖打补丁：如果不能升级大版本，可以手动修改canMerge.js中的代码，增加空值防护：
   原代码：

   const hasInherit = node => node.value.toLowerCase() === 'inherit';
   

   修改后：

   const hasInherit = node => node?.value?.toLowerCase() === 'inherit';
   

   要让修改永久生效，可以配合patch-package工具给依赖包打本地补丁。

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