84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
// https://www.npmjs.com/package/@uni-helper/unocss-preset-uni
|
||
import { presetUni } from '@uni-helper/unocss-preset-uni'
|
||
import {
|
||
defineConfig,
|
||
definePreset,
|
||
presetAttributify,
|
||
presetIcons,
|
||
transformerDirectives,
|
||
transformerVariantGroup,
|
||
} from 'unocss'
|
||
|
||
export const presetRemToRpx = definePreset(() => {
|
||
const baseFontSize = 16
|
||
const remRE = /(-?[.\d]+)rem/g
|
||
return {
|
||
name: '@unocss/preset-rem-to-px',
|
||
postprocess: (util) => {
|
||
util.entries.forEach((i) => {
|
||
const value = i[1]
|
||
if (typeof value === 'string' && remRE.test(value))
|
||
i[1] = value.replace(remRE, (_, p1) => `${p1 * baseFontSize * 2}rpx`)
|
||
})
|
||
},
|
||
}
|
||
})
|
||
|
||
export default defineConfig({
|
||
presets: [
|
||
presetUni({
|
||
attributify: {
|
||
// prefix: 'fg-', // 如果加前缀，则需要在代码里面使用 `fg-` 前缀，如：<div fg-border="1px solid #000"></div>
|
||
prefixedOnly: true,
|
||
},
|
||
}),
|
||
presetIcons({
|
||
scale: 1.2,
|
||
warn: true,
|
||
extraProperties: {
|
||
'display': 'inline-block',
|
||
'vertical-align': 'middle',
|
||
},
|
||
}),
|
||
// 支持css class属性化
|
||
presetAttributify(),
|
||
presetRemToRpx(),
|
||
],
|
||
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',
|
||
},
|
||
],
|
||
// 动态图标需要在这里配置，或者写在vue页面中注释掉
|
||
safelist: ['i-carbon-code'],
|
||
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'],
|
||
},
|
||
},
|
||
})
|