unibest/uno.config.ts
feige996 ff848585ae feat(unocss): 添加 presetAttributify 支持 CSS class 属性化
在 UnoCSS 配置中添加 presetAttributify 预设,使其支持通过属性方式使用 CSS class,提升开发体验
2025-05-27 16:55:31 +08:00

59 lines
1.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { presetUni } from '@uni-helper/unocss-preset-uni'
import {
defineConfig,
presetIcons,
presetAttributify,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
export default defineConfig({
presets: [
presetUni(),
presetIcons({
scale: 1.2,
warn: true,
extraProperties: {
display: 'inline-block',
'vertical-align': 'middle',
},
}),
// 支持css class属性化
presetAttributify(),
],
transformers: [
// 启用指令功能:主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
transformerDirectives(),
// 启用 () 分组功能
// 支持css class组合eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
transformerVariantGroup(),
],
shortcuts: [
{
center: 'flex justify-center items-center',
},
],
rules: [
[
'p-safe',
{
padding:
'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
},
],
['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
],
theme: {
colors: {
/** 主题色,用法如: text-primary */
primary: 'var(--wot-color-theme,#0957DE)',
},
fontSize: {
/** 提供更小号的字体用法如text-2xs */
'2xs': ['20rpx', '28rpx'],
'3xs': ['18rpx', '26rpx'],
},
},
})