Nuxt3中UnoCSS DaisyUI预设生产环境样式异常如何解决？

问题描述 #

我使用Nuxt3 + UnoCSS + DaisyUI社区预设，运行npx nuxi dev时一切正常，但执行npx nuxi generate && npx serve dist构建部署后，UnoCSS功能正常，但部分DaisyUI预设样式出现异常。

复现方式 #

我创建了一个在线小示例来演示该问题：

开发环境效果：

生产环境效果：

排查尝试 #

我花费一整天调试仍未找到原因，仅发现DaisyUI预设中的部分样式不正确，示例如下：

@kidonng/daisyui/utilities/styled/button.css中定义的btn-sm类样式：

.btn-sm {
    @apply h-8 px-3 min-h-8;
    font-size: 0.875rem;
  }

开发环境下Chrome调试工具显示的样式（h-8对应height: 2rem）：

但生产环境预览时Chrome调试工具显示的样式：

Nuxt生成的对应CSS文件（entry.7b197c61.css）内容：

.btn-md,
.btn-sm {
  height: 3rem;
  min-height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
}

正确样式应为height: 2rem，但生成的CSS却是height: 3rem，这非常奇怪，不清楚原因及解决方法，希望得到帮助。

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