Nuxt 3+UnoCSS+SCSS环境下多行@apply生产环境失效问题求助

问题代码 #

<style lang="scss">
.tag {
  @apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block; //line is ignored
  @apply bg-brand-supporting hover:border-gray-400 text-white;
}
</style>

原因解析 #

核心冲突在于SCSS行内注释与UnoCSS生产环境静态扫描机制的不兼容：

• 开发环境中，UnoCSS采用实时注入模式，对@apply内的类名解析逻辑更宽松，能自动忽略行内注释并正确识别所有utility类；
• 生产环境下，UnoCSS会执行静态代码扫描以按需生成样式，行内的//line is ignored会干扰扫描器对第一行@apply内类名的分割识别，导致rounded、px-2、py-1等类未被检测到，对应的样式也就不会被打包进生产环境的CSS中。
• 此外，多行@apply在SCSS编译压缩阶段可能出现指令合并优先级问题，进一步加剧样式丢失的情况。

解决方案 #

• 移除行内注释，改用单独行注释
  把注释移到@apply行的上方或下方，避免干扰类名识别：

  <style lang="scss">
  .tag {
    // line is ignored
    @apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block;
    @apply bg-brand-supporting hover:border-gray-400 text-white;
  }
  </style>
  

• 合并多行@apply为单行
  如果逻辑允许，将两个@apply合并成一行，减少解析歧义：

  <style lang="scss">
  .tag {
    @apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block bg-brand-supporting hover:border-gray-400 text-white;
  }
  </style>
  

• 使用SCSS块注释（可选）
  如果必须保留行内注释，改用/* ... */块注释，部分情况下能避免扫描器识别错误：

  <style lang="scss">
  .tag {
    @apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block; /* line is ignored */
    @apply bg-brand-supporting hover:border-gray-400 text-white;
  }
  </style>
  

• 检查UnoCSS配置
  确保nuxt.config.ts中UnoCSS的preset配置正确开启presetUno，且生产环境扫描范围包含组件内的<style>标签：

  export default defineNuxtConfig({
    modules: ['@unocss/nuxt'],
    unocss: {
      presets: [
        presetUno(),
        // 其他预设配置...
      ]
    }
  })
  

内容的提问来源于stack exchange，提问作者Marian Klühspies