简介:vue3让你写页面样式事半功倍的CSS框架-Unocss配置上手
- nuxt3配置:https://github.com/unocss/unocss/tree/main/packages/nuxt
- 写法地址:https://uno.antfu.me/
安装
yarn add -D @unocss/nuxt@0.45.29
配置
export default defineNuxtConfig({
modules: ['@unocss/nuxt'],
unocss: {
uno: true,
attributify: true,
shortcuts: [
{ flexc: 'flex items-center justify-center' },
{ flexb: 'flex items-center justify-between' },
{ btn: 'rounded-5px text-center cursor-pointer select-none' },
{ 'text-btn': 'text-center cursor-pointer select-none' },
],
rules: [
[
/^truncate-(\d+)$/,
([, d]) => ({
overflow: 'hidden',
display: '-webkit-box',
'text-overflow': 'ellipsis',
'-webkit-line-clamp': d,
'-webkit-box-orient': 'vertical',
}),
],
[
/^center-text-(\d+)$/,
([, d]) => ({
height: `${d}px`,
'align-items': 'center',
'line-height': `${Number(d) - 2}px`,
}),
],
[
/^wh-(\d+)$/,
([, d]) => ({
width: `${d}px`,
height: `${d}px`,
}),
],
],
},
});
使用(小试牛刀)
<div color-red bg-blue font-600 fs-30 w-100 h-100 flexc>CSDN</div>
<a-button w-20px color-green! bg-red!>按钮</a-button>