【unocss】自用

unocss中文官网1

不知道简写的可以在这里查

第一步

js 复制代码
npm install -D unocss

第二步

js 复制代码
// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [UnoCSS()]
})
js 复制代码
// main.ts
import 'virtual:uno.css'

第三步

在原子css的默认预设中,默认单位为rem,且1rem = 4px

所以如果想要默认单位为 px,需要如下设置

js 复制代码
npm i @unocss/preset-rem-to-px -D
js 复制代码
// unocss.config.js
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetRemToPx({
      baseFontSize: 4,
    }),
  ],
})

注释:

presetAttributify 的作用是支持属性的写法。

例如,可以用下面的方式替代全部写在class=" "里的方式

html 复制代码
<button
      flex
      justify-center
      items-center
      text-14
      cursor-pointer
      select-none
      px-15
      py-8
      border-rd-4
      border-none
      box-border
      color="#9b1fb9"
      bg="#409eff"
      m-auto
      hover="bg-#67c23a"
      transition="duration-.3s"
    >
	button
</button>

第四步

可以自己加一些预设,例如下面的 rules

js 复制代码
// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";

export default defineConfig({
  // ...UnoCSS options
  presets: [
    presetUno(),
    presetAttributify(),
    presetRemToPx({
      baseFontSize: 4,
    }),
  ],
  rules: [
    // [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^lines-(\d+)$/, ([_, lines]) => ({
      'overflow': 'hidden',
      'text-overflow': 'ellipsis', // 文本溢出时显示省略号
      'display': '-webkit-box',
      "-webkit-box-orient": 'vertical', 
      '-webkit-line-clamp': lines, // 使用捕获组中的数字来设置行数
    })],
    [
      'p-c', // 使用时只需要写 p-c 即可应用该组样式
       {
         position: 'absolute',
         top: '50%',
         left: '50%',
         transform: `translate(-50%, -50%)`
       }
   	],
  ],
  
});

用了插件才知道,原来上面的预设也是没必要的

相关推荐
小小弯_Shelby3 分钟前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒5 分钟前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端
加洛斯1 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v51 小时前
学习爬虫第三天:数据提取
前端·爬虫·python·学习
可爱的秋秋啊1 小时前
简单网站编写
开发语言·前端
Keepreal4961 小时前
Electron基本概念
前端·javascript·electron
zhaoolee1 小时前
Claude Code使用指北(如何白嫖百万Qwen3 Token,每月劲省20刀)
前端
前台端水工程师2 小时前
vite-plugin-mock插件的3.0.2版本在生产环境无法使用
前端
戈卬2 小时前
VSCode 中 Prettier 工作原理与使用指南
前端
我叫张得帅2 小时前
从零开始的前端异世界生活--005--“HTTP详细解析中”
前端