UnoCSS 在 Nuxt 项目中构建错误分析与解决方案

问题背景

在 Nuxt 项目中使用 UnoCSS 时，开发者遇到了一个特定的构建错误。当尝试在 SCSS 文件中使用嵌套的选择器结合 @screen 媒体查询时，构建过程会失败并显示错误信息："Cannot split a chunk that has already been edited"。

错误重现

错误主要出现在以下场景中：

section {
  --uno: m-0 p-6 w-full flex flex-col justify-start items-center border-r-8;

  .component {
    --uno: relative flex-basis-full;
  }
}

@screen lg {
  section {
    --uno: p-10;
    
    .component {
      --uno: flex-basis-48%;
    }
  }
}

而当移除 @screen 块内的嵌套选择器时，构建则能正常完成：

@screen lg {
  section {
    --uno: p-10;
  }
}

根本原因分析

这个问题的根源在于 UnoCSS 的 transformer 处理机制与 SCSS 预处理器的交互方式。当 UnoCSS 尝试处理已经经过 SCSS 预处理器转换的代码块时，特别是在媒体查询内部嵌套选择器的情况下，会导致内部处理流程冲突。

UnoCSS 的设计初衷是处理原子化的 CSS 类名，而不是直接处理复杂的 SCSS 嵌套结构。当遇到 @screen 指令（UnoCSS 提供的媒体查询快捷方式）内部的嵌套选择器时，UnoCSS 的 transformer 无法正确分割已经预处理过的代码块。

解决方案

方案一：使用 PostCSS 替代 SCSS

将样式文件从 SCSS 转换为纯 CSS 或 PostCSS，避免使用 SCSS 的嵌套特性：

section {
  --uno: m-0 p-6 w-full flex flex-col justify-start items-center border-r-8;
}

section .component {
  --uno: relative flex-basis-full;
}

@screen lg {
  section {
    --uno: p-10;
  }
  
  section .component {
    --uno: flex-basis-48%;
  }
}

方案二：使用 UnoCSS 原生响应式语法

更推荐的方式是充分利用 UnoCSS 自带的响应式前缀，完全避免使用 @screen 指令：

section {
  --uno: m-0 p-6 w-full flex flex-col justify-start items-center border-r-8 lg:p-10;
}

section .component {
  --uno: relative flex-basis-full lg:flex-basis-48%;
}

这种方法不仅解决了构建错误，还使代码更加简洁，完全符合 UnoCSS 的设计理念。

最佳实践建议

1. 优先使用 UnoCSS 原生功能：尽量使用 lg:、md: 等响应式前缀而非 @screen 指令
2. 简化嵌套结构：减少深层嵌套，UnoCSS 更适合处理扁平化的样式结构
3. 考虑样式组织方式：复杂的组件样式更适合放在组件单文件内，而非全局样式文件中
4. 评估预处理器必要性：在 UnoCSS 项目中，SCSS/Less 等预处理器的许多功能可能已不再必要

总结

这个构建错误揭示了 UnoCSS 与 CSS 预处理器结合使用时需要注意的边界情况。通过理解 UnoCSS 的工作原理并采用其推荐的模式，开发者可以避免此类问题，同时写出更高效、更可维护的样式代码。在原子化 CSS 方案中，通常更推荐使用工具原生的响应式处理方式，而非依赖预处理器的嵌套特性。