97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
|
// 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',
|
|||
|
|
},
|
|||
|
|
// 可以指定需要的图标集合
|
|||
|
|
collections: {
|
|||
|
|
carbon: () => import('@iconify-json/carbon').then((i) => i.icons as any),
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
// 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
|
|||
|
|
// `rgb(255 0 0)` -> `rgb(255, 0, 0)`
|
|||
|
|
// `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
|
|||
|
|
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
|
|||
|
|
*
|
|||
|
|
* 另外，我们还可以推算出 UnoCSS 单位与设计稿差别4倍。
|
|||
|
|
* 375 * 4 = 1500，把设计稿设置为1500，那么设计稿里多少px，unocss就写多少述职。
|
|||
|
|
* 举个例子，设计稿显示某元素宽度100px，就写w-100即可。
|
|||
|
|
*
|
|||
|
|
* 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
|
|||
|
|
* rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
|
|||
|
|
*/
|