Unocss 如何设置自定义样式规则

• 查到这里，默认对Unocss有所了解，基本信息就不赘述
• 主要展示如何自定义样式规则，后面遇到类似的样式，方便使用

---

1、在vite.config同级增加一个文件（uno.config.ts）

2、在文件（uno.config.ts）中，编写自己的自定义样式

​
// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  // 静态规则
  rules: [['mx-5', { 'margin-bottom': '5px', color: '#00ff00' }]],
  // 动态规则
  shortcuts: [[/^base-(.*)$/, (match) => `mx-5  border-${match[1]}`]],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetRemToPx({
      baseFontSize: 4
    })
  ]
})

​

• 要设置这2个函数，直接从Unocss中导出即可
• 最后在mian.ts 中导入

上述操作后，即可使用自定义的样式

结果：

静态样式

动态样式（正则匹配）

      

---

另：

在原子css的默认预设中，默认单位为rem，且1rem = 4px
所以如果想要

默认单位为 px，需要如下设置

npm i @unocss/preset-rem-to-px -D

// 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,
    }),
  ],
})