解决umijs/mako项目中CSS嵌套语法与构建配置问题

问题背景

在使用umijs/mako项目时，开发者遇到了两个主要的技术问题：CSS嵌套语法兼容性和构建配置导致的错误。这些问题在项目升级到umi 3.5.37版本后出现，影响了项目的正常构建过程。

CSS嵌套语法问题

问题表现

项目中使用了类似Sass/Less的CSS嵌套语法：

&:hover {
  background-color: var(--action-background, rgba(0, 0, 0, 0.05));
  
  svg {
    fill: #6f7b88;
  }
}

这种写法在现代CSS预处理器中很常见，但在原生CSS中并不支持。当项目构建时，这种嵌套语法会导致解析错误。

解决方案

正确的做法是将嵌套的CSS规则改写为平铺形式：

&:hover {
  background-color: var(--action-background, rgba(0, 0, 0, 0.05));
}
&:hover svg {
  fill: #6f7b88;
}

这种改写方式既保持了相同的样式效果，又符合原生CSS的语法规范，确保了构建过程的顺利进行。

构建配置问题

问题表现

在解决了CSS语法问题后，开发者又遇到了新的构建错误。错误信息表明在构建过程中出现了模块解析问题，特别是在处理代码拆分(chunk)时。

问题原因

经过分析，发现问题的根源在于项目配置中包含了自定义的chunks配置。在umijs/mako的构建过程中，chunk列表是动态读取mako生成的stats.json文件的，手动配置的chunks会与这一机制产生冲突。

解决方案

最简单的解决方法是移除项目中的chunks配置项。这样构建系统就能按照默认的、基于stats.json的机制来正确处理代码拆分。

技术要点总结

1. CSS规范兼容性：现代前端开发中虽然CSS预处理器很流行，但在某些构建环境下仍需注意原生CSS的语法限制。

2. 构建工具配置：umijs/mako有自己独特的构建机制，特别是关于代码拆分的处理方式。了解这些内部机制有助于避免配置冲突。

3. 问题排查方法：当遇到构建错误时，可以尝试：

   • 逐步简化配置
   • 对比不同构建工具的行为差异
   • 查阅特定工具的文档了解其工作机制

最佳实践建议

1. 在项目中使用CSS时，如果不确定构建环境对预处理器的支持程度，建议采用更兼容的写法。

2. 在使用umijs/mako这类工具时，建议先了解其默认行为和工作原理，避免过度自定义配置。

3. 遇到构建问题时，可以尝试从最简单的配置开始，逐步添加功能，以定位问题来源。

通过理解这些问题背后的原理和解决方案，开发者可以更好地使用umijs/mako进行项目开发，避免类似的构建问题。