81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
import type {Preset, SourceCodeTransformer} from 'unocss'
|
|
import {
|
|
defineConfig,
|
|
presetUno,
|
|
presetAttributify,
|
|
presetIcons,
|
|
transformerDirectives,
|
|
transformerVariantGroup
|
|
} from 'unocss'
|
|
import {presetRemRpx} from 'unocss-applet'
|
|
import {presetAnimations} from 'unocss-preset-animations'
|
|
|
|
|
|
const presets: Preset[] = []
|
|
const transformers: SourceCodeTransformer[] = []
|
|
presets.push(presetUno())
|
|
presets.push(presetAnimations())
|
|
presets.push(presetAttributify())
|
|
presets.push(presetRemRpx({mode: 'rpx2rem'}))
|
|
|
|
|
|
export default defineConfig({
|
|
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',
|
|
},
|
|
}),
|
|
...presets,
|
|
],
|
|
/**
|
|
* 自定义快捷语句
|
|
* @see https://github.com/unocss/unocss#shortcuts
|
|
*/
|
|
shortcuts: [
|
|
['center', 'flex justify-center items-center'],
|
|
['flex-center-sb', 'flex justify-between items-center'],
|
|
['bg-primary', 'bg-#333'],
|
|
['border-primary', 'border-#333'],
|
|
['bg-common', 'bg-#F6F6F6'],
|
|
['text-primary', 'text-#333'],
|
|
['text-50-bold', 'text-50rpx lh-50rpx text-#14181B font-bold'],
|
|
['text-48-bold', 'text-48rpx lh-48rpx text-#14181B font-bold'],
|
|
['text-38-bold', 'text-38rpx lh-52rpx text-primary font-bold'],
|
|
['text-36-bold', 'text-36rpx lh-50rpx text-primary font-bold'],
|
|
['text-34-bold', 'text-34rpx lh-48rpx text-primary font-bold'],
|
|
['text-30-bold', 'text-30rpx lh-42rpx text-primary font-bold'],
|
|
['text-28-bold', 'text-28rpx lh-28rpx text-primary font-bold'],
|
|
['text-24-bold', 'text-24rpx lh-34rpx text-primary font-bold'],
|
|
['text-20-bold', 'text-20rpx lh-30rpx text-primary font-bold'],
|
|
],
|
|
transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
|
|
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是响应式的，可以让不同设备的屏幕显示效果保持一致。
|
|
*/
|