1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| // uno.config.ts
| import {
| type Preset,
| defineConfig,
| presetUno,
| presetAttributify,
| presetIcons,
| transformerDirectives,
| transformerVariantGroup,
| } from 'unocss'
|
| import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'
|
| // @see https://unocss.dev/presets/legacy-compat
| // import { presetLegacyCompat } from '@unocss/preset-legacy-compat'
|
| const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false
|
| const presets: Preset[] = []
| if (isMp) {
| // 使用小程序预设
| presets.push(presetApplet(), presetRemRpx())
| } else {
| presets.push(
| // 非小程序用官方预设
| presetUno(),
| // 支持css class属性化
| presetAttributify(),
| )
| }
| export default defineConfig({
| presets: [
| ...presets,
| // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
| presetIcons({
| scale: 1.2,
| warn: true,
| extraProperties: {
| display: 'inline-block',
| 'vertical-align': 'middle',
| },
| }),
| // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
| // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
| // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
| // 与群友的正常写法冲突，先去掉！（2024-05-25）
| // presetLegacyCompat({
| // commaStyleColorFunction: true,
| // }) as Preset,
| ],
| /**
| * 自定义快捷语句
| * @see https://github.com/unocss/unocss#shortcuts
| */
| shortcuts: [['center', 'flex justify-center items-center']],
| transformers: [
| // 启用 @apply 功能
| transformerDirectives(),
| // 启用 () 分组功能
| // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
| transformerVariantGroup(),
| // Don't change the following order
| transformerAttributify({
| // 解决与第三方框架样式冲突问题
| prefixedOnly: true,
| prefix: 'fg',
| }),
| ],
| 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)' }],
| ],
| })
|
| /**
| * 最终这一套组合下来会得到：
| * mp 里面：mt-4 => margin-top: 32rpx == 16px
| * h5 里面：mt-4 => margin-top: 1rem == 16px
| *
| * 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
| * rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
| */
|
|
