Nuxt3升级unocss后编译出现Double colon错误的解决方法

发布日期: 2023-01-01 阅读: 1405 点赞: 0

UnoCSS 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎，受 Windi CSS、Tailwind CSS、Twind 的启发。

从nuxt2升级nuxt3 rc版有些日子了，随着nuxt3正式版发布升级了框架，顺便升级了@unocss/nuxt，发现运行npm run build报错。

升级前0.46.x 版本没有该问题，经过测试0.47.x和0.48.0版本均有该问题，升级后的依赖配置如下：

    "@unocss/nuxt": "^0.48.0",

错误内容：

[unocss:global:build:scan] [postcss] /Users/***/MyWorkspace/***/server.mjs-unocss-hash.css:1:2841: Double colon

经过分析是因为启用attributify后，生成的css里边有 display::; 字样，存在语法错误。

[display~="\:"]{display::;}.h-1\/2{height:50%;}

解决方式有如下两种，修改nuxt.config.ts

方法一、关闭attributify

  unocss: {
    uno: true,
    attributify: false,
    icons: true,
    components: false,
    shortcuts: [
      [
        'btn',
        'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'
      ],
    ],
  }

方法二、配置attributify 启用prefix

  unocss: {
    uno: true,
    attributify: {
      prefix: 'un-',
      prefixedOnly: true, // <--
    },
    icons: true,
    components: false,
    shortcuts: [
      [
        'btn',
        'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'
      ],
    ],
  }

总结

Nuxt3 还很年轻，周边生态还不够完善，有不少坑，谨慎升级

转载请注明出处，本文采用 CC4.0 协议授权