Nuxt3升级unocss后编译出现Double colon错误的解决方法
发布日期: 2023-01-01 阅读: 1545 点赞: 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 协议授权