更新记录

1.0.28（2024-07-17）

增加配置 options.color 用来增补颜色预设；如：unocss({ color: { test: '#123' } }) 颜色相关属性就可以写 text-test bg-test b-test 等;
解决 window 环境 HBuilderX 开发小程序时检查不到开发还是生成环境；

1.0.27（2024-07-16）

自动在 App.vue 引入预设 CSS 文件，无需在手动引入；
解决开发时生成了预设 CSS 有时没有编译，需要重新编译问题。只有打包才会编译 App.vue 里的预设 CSS 文件，开发时会预设在编译后的源码里；
删除小程序自动引入配置 autoImport;
删除通配符预设配置 asteriskWildcard;

1.0.26（2024-07-15）

修复 asteriskWildcard 有时失效问题；
优化同一套项目运行多端删除不兼容 CSS ；
优化小程序在使用了预设的文件自动引入时问题；

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue app-nvue app-uvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

简单版轻量原子化CSS

Usage

/** vite.config.js */
import { defineConfig } from 'vite';
import unocss from './js_sdk/a-hua-unocss';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [
        uni(),
        unocss()
    ]
});

自定义预设【原子化CSS】规则

/** vite.config.js */
import { defineConfig } from 'vite';
import unocss from './js_sdk/a-hua-unocss';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [
        uni(),
        unocss({
            rules: [
                ['m-1', { margin: '1px' }],
                [/^m-([\.\d]+)$/, (_, m, d) => ({ margin: `${d}px` })]
            ]
        })
    ]
});

Options

name	type	default
unit	string	`rpx`
once	boolean	`true`
rules	Rules	`undefined`
color	Record<string, string>	`null`
include	string \| string[]	`undefined`
numberValue	`(value) => value`	`(value) => value`
cssFilePath	string	`@/js_sdk/a-hua-unocss/index.scss`
exclude	string \| string[]	`['uni_modules', 'node_modules', 'App.vue']`

unit：单位；
numberValue：处理数字类型的值；
exclude：排除文件|文件夹；如：[uni_modules, pages/home]；
color：增补预设颜色；注：#123 #123456 只能 # 后只能为 3 或 6 个字符；
cssFilePath：预设css文件路径；注：此属性只对 mp-weixin 生效。需要配合 autoImport 使用；
once：true 只第一次运行项目生成原子类样式；false 每次运行项目清空上次生成原子类样式，然后重新生成原子类样式；
include：匹配文件|文件夹；如：[test, pages/home]；注：include、exclude 同时存在优先级 include 高于 exclude；
rules：自定义预设CSS规则；

type CSSEntries = [string, string | number][];
type CSSObject = Record<string, string | number>;
type CSSValue = CSSObject | CSSEntries;
type Rules = [string, CSSObject | CSSEntries] | [RegExp, ((match: RegExpMatchArray, ...context: string[]) => CSSValue | string | (CSSValue | string)[] | undefined)]

Use Rule

width、height

className：w-1 w-auto w-fit w-full w-full-10
className：h-1 h-auto h-fit h-full h-full-10 h-1vh

margin、padding

className：m-1 -m-1 m-full -m-full m-full-10 -m-full-10 m-auto
className：mx-1 -mx-1 mx-full -mx-full mx-full-10 -mx-full-10 mx-auto
className：my-1 -my-1 my-full -my-full my-full-10 -my-full-10 my-auto
className：mt-1 -mt-1 mt-full -mt-full mt-full-10 -mt-full-10 mt-auto
className：mr-1 -mr-1 mr-full -mr-full mr-full-10 -mr-full-10 mr-auto
className：mb-1 -mb-1 mb-full -mb-full mb-full-10 -mb-full-10 mb-auto
className：ml-1 -ml-1 ml-full -ml-full ml-full-10 -ml-full-10 ml-auto
className：p-1 p-full p-full-10
className：px-1 px-full px-full-10
className：py-1 py-full py-full-10
className：pt-1 pt-full pt-full-10
className：pr-1 pr-full pr-full-10
className：pb-1 pb-full pb-full-10
className：pl-1 pl-full pl-full-10

background-color

className：bg-123 bg-1234 bg-123456 bg-12345678 bg-red bg-red-10 bg-transparent

border

className：b b-1 b-red b-red-10 b-color-red b-color-red-10 b-solid b-style-solid
className：bt bt-1 bt-red bt-red-10 bt-color-red bt-color-red-10 bt-solid bt-style-solid
className：br br-1 br-red br-red-10 br-color-red br-color-red-10 br-solid br-style-solid
className：bb bb-1 bb-red bb-red-10 bb-color-red bb-color-red-10 bb-solid bb-style-solid
className：bl bl-1 bl-red bl-red-10 bl-color-red bl-color-red-10 bl-solid bl-style-solid

color

className：text-123 text-1234 text-123456 text-12345678 text-red text-red-10

font-size

className：text-24

text-align

className：text-center text-right text-left text-justify text-end text-start

text-overflow

className：text-ellipsis

font-weight

className：text-bold text-normal

white-space

className：nowrap pre-line

word-break

className：break-word break-all

display

className：block inline inline-block flex inline-flex grid flex-grid flow-root none hidden contents table table-row list-item inherit initial revert revert-layer unset

flex

className：flex-1 flex-auto flex-none flex-inherit flex-initial flex-revert flex-revert-layer flex-unset flex-row flex-row-reverse flex-column flex-column-reverse flex-col flex-col-reverse flex-wrap flex-wrap-reverse flex-nowrap

justify-content

className：justify-inherit justify-initial justify-unset justify-left justify-right justify-between justify-around justify-evenly justify-start justify-end justify-baseline justify-center justify-flex-start justify-flex-end justify-stretch

align-items

className：items-normal items-stretch items-center items-start items-end items-flex-start items-flex-end items-self-start items-self-end items-inherit items-initial items-revert items-revert-layer items-unset

align-content

className：content-center content-start content-end content-flex-start content-flex-end content-normal content-baseline content-between content-around content-evenly content-stretch content-inherit content-initial content-unset

position

className：static
className：relative relative-1 -relative-1
className：absolute absolute-1 -absolute-1
className：fixed fixed-1 -fixed-1
className：sticky sticky-1 -sticky-1

z-index

className：z-1 -z-1

top、right、bottom、left

className：top-1 -top-1 top-full -top-full top-full-10 -top-full-10
className：right-1 -right-1 right-full -right-full right-full-10 -right-full-10
className：bottom-1 -bottom-1 bottom-full -bottom-full bottom-full-10 -bottom-full-10
className：left-1 -left-1 left-full -left-full left-full-10 -left-full-10

translate、scale、rotate、scale

className：translate-1 -translate-1 translate-full -translate-full translate-full-10 -translate-full-10
className：translate-x-1 -translate-x-1 translate-x-full -translate-x-full translate-x-full-10 -translate-x-full-10
className：translate-y-1 -translate-y-1 translate-y-full -translate-y-full translate-y-full-10 -translate-y-full-10
className：translate-z-1 -translate-z-1 translate-z-full -translate-z-full translate-z-full-10 -translate-z-full-10
className：scale-10 -scale-10
className：scale-x-10 -scale-x-10
className：scale-y-10 -scale-y-10
className：rotate-1 -rotate-1
className：rotate-x-1 -rotate-x-1
className：rotate-y-1 -rotate-y-1
className：rotate-z-1 -rotate-z-1
className：skew-1 -skew-1
className：skew-x-1 -skew-x-1
className：skew-y-1 -skew-y-1

transform-origin

className：transform-origin-center transform-origin-center-top transform-origin-center-right transform-origin-center-center transform-origin-center-bottom transform-origin-center-left
className：transform-origin-top transform-origin-top-right transform-origin-top-center transform-origin-top-left
className：transform-origin-right transform-origin-right-top transform-origin-right-center transform-origin-right-bottom
className：transform-origin-bottom transform-origin-bottom-left transform-origin-bottom-center transform-origin-bottom-right
className：transform-origin-left transform-origin-left-top transform-origin-left-center transform-origin-left-bottom
className：transform-origin-1 transform-origin-1-1 transform-none

transform-style

className：transform-style-3d transform-style-flat

overflow

className：overflow-visible overflow-hidden overflow-clip overflow-scroll overflow-auto overflow-inherit overflow-initial overflow-revert overflow-revert-layer overflow-unset
className：overflow-x-visible overflow-x-hidden overflow-x-clip overflow-x-scroll overflow-x-auto overflow-x-inherit overflow-x-initial overflow-x-revert overflow-x-revert-layer overflow-x-unset
className：overflow-y-visible overflow-y-hidden overflow-y-clip overflow-y-scroll overflow-y-auto overflow-y-inherit overflow-y-initial overflow-y-revert overflow-y-revert-layer overflow-y-unset
className：of-visible of-hidden of-clip of-scroll of-auto of-inherit of-initial of-revert of-revert-layer of-unset
className：of-x-visible of-x-hidden of-x-clip of-x-scroll of-x-auto of-x-inherit of-x-initial of-x-revert of-x-revert-layer of-x-unset
className：of-y-visible of-y-hidden of-y-clip of-y-scroll of-y-auto of-y-inherit of-y-initial of-y-revert of-y-revert-layer of-y-unset

gap

className：list-gap-200-3 gap-1 gap-1-1

min-width、min-height、max-width、max-height

className：min-w-10 min-w-full min-w-full-10
className：min-h-10 min-h-10vh min-h-full min-h-full-10

object-fit

className：fit-none fit-contain fit-cover fit-fill fit-scale-down

opacity

className：opacity-10

transition

className：transition-all transition-all-300
className：transition-color transition-color-300
className：transition-width transition-width-300
className：transition-height transition-height-300
className：transition-border transition-border-300
className：transition-margin transition-margin-300
className：transition-padding transition-padding-300
className：transition-opacity transition-opacity-300
className：transition-transform transition-transform-300
className：transition-font-size transition-font-size-300
className：transition-background-color transition-background-color-300
className：transition-background-color transition-background-color-300

line-clamp

className：line-clamp-1

line-height

className：line-height-10 lh-10 line-height-normal-10 lh-normal-10

border-radius

className：round-1 rd-1
className：round-t-1 rd-t-1 round-tr-1 rd-tr-1 round-tl-1 rd-tl-1
className：round-r-1 rd-r-1
className：round-b-1 rd-b-1 round-br-1 rd-br-1 round-bl-1 rd-bl-1
className：round-l-1 rd-l-1

column-count

className：column-count-2 column-3

column-gap

className：column-gap-10

box-sizing

className：box-border box-content

break-inside

className：avoid-column

vertical-align

className：vertical-baseline vertical-top vertical-middle vertical-bottom vertical-sub vertical-text-top
className：vertical-1 -vertical-1 vertical-full -vertical-full vertical-full-10 -vertical-full-10
className：v-baseline v-top v-middle v-bottom v-sub v-text-top
className：v-1 -v-1 v-full -v-full v-full-10 -v-full-10

Contact

欢迎大家提供建议。

Enjoy!

unocss 轻量 原子化 css style unocss

更新记录

1.0.28（2024-07-17）

1.0.27（2024-07-16）

1.0.26（2024-07-15）

平台兼容性

简单版轻量原子化CSS

Usage

Options

Use Rule

Contact

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

unocss

auto-pages-json

validate

router

unocss 轻量 原子化 css style unocss

更新记录

1.0.28（2024-07-17）

1.0.27（2024-07-16）

1.0.26（2024-07-15）

平台兼容性

简单版轻量原子化CSS

Usage

Options

Use Rule

Contact

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

unocss

auto-pages-json

validate

router

Modal title

unocss 轻量原子化 css style unocss