更新记录

1.3.9（2025-04-18） 下载此版本

App 打包漏编译

1.3.8（2025-02-08） 下载此版本

1.4 还在构件中，将实现 MDN 所有 CSS Properties;

目前先解决两点明显问题：

1： 热更新时编译两次；

  1. options.log 配置无效；

1.3.7（2024-12-06） 下载此版本

  1. 修复少数环境（如：黑苹果）自动引入路径为电脑根目录路径问题；

  2. 扩大 class name 正则匹配范围（匹配动态 class name）；

  3. 优化伪类函数 pseudo 正则匹配规则；

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ √ - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ - √ √ √ √

uni-app x

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ 5.0 12 - √

其他

多语言 暗黑模式 宽屏模式
× × √

简单版轻量原子化CSS

Usage

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss from './js_sdk/a-hua-unocss';

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

unocss

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24
                 */
                unocss()
            ]
        })
    ]
});

unocss + flex

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss, flex } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss(),

                /** 
                 * 弹性盒速写；
                 * flex-center、flex-col-center、flex-row-center...
                 */
                flex()
            ]
        })
    ]
});

unocss + media + options.theme

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss, media } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss(),

                /** 
                 * 媒体查询配合 options.theme.breakpoints 使用；
                 * sm-w-100、md-w-100、lg-w-100、xl-w-100、xl2-w-100
                 * uno-sm-h-100、uno-md-h-100、uno-lg-h-100、uno-xl-h-100、uno-xl2-h-100
                 * xx-sm-h-100、xx-md-h-100、xx-lg-h-100、xx-xl-h-100、xx-xl2-h-100
                 */
                media(),

                /** 主题配置 */
                theme: {
                    /** 
                     * 自定义媒体查询、断点配置；默认单位: px；
                     * 默认配置如下；
                     */
                    breakpoints: {
                        'sm': 640,
                        'md': 768,
                        'lg': 1024,
                        'xl': 1280,
                        'xl2': 1536
                    }
                }
            ]
        })
    ]
});

unocss + pseudo

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss, pseudo } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss(),

                /** 
                 * 伪类、伪元素预设；
                 * after:text-24 after:(text-24 text-white)...
                 */
                pseudo()
            ]
        })
    ]
});

unocss + sketch

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss, sketch } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss(),

                /** 
                 * 速写之函数写法；
                 * p(0 1 2! 3important) padding()
                 * m(auto -1) margin()
                 * rd() round()
                 * b(1px solid white) bt() br() bb() bl() border() border-top() border-right() border-bottom() brder-left()
                 */
                sketch()
            ]
        })
    ]
});

unocss + border

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss, border } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss(),

                /** 
                 * 边框速写；
                 * border-1 => border: 1px solid currentColor
                 * border-1-red => border: 1px solid red
                 * border-red => border: 1px solid red
                 * ...
                 * 默认配置如下；
                 */
                border({
                    width: 1,
                    style: 'solid',
                    color: 'currentColor'
                })
            ]
        })
    ]
});

unocss + options.prefix

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /** 
             * 自定义原子化 CSS 前缀；
             * 默认配置如下；
             */
            prefix: ['uno', 'xx']
        })
    ]
});

unocss + options.exclude

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /** 
             * 排出检测原子化 CSS 规则；
             * 默认配置如下；
             */
            exclude: ['node_modules', 'uni_modules']
        })
    ]
});

unocss + options.autoImport

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /** 
             * 是否自动在 App.vue、App.nuve、App.uvue 引入原子化 CSS 样式文件；
             * 默认 false；
             */
            autoImport: false
        })
    ]
});

unocss + options.log + options.mode

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /**
             * 是否在项目根目录生成未匹配到原子化 CSS 规则的 class name；
             * 配合 options.mode 使用；
             * 默认 false；
             */
            log: false,
            log: (value: filePath) => Boolean,

            /** 
             * 当前编译环境；
             * 默认为当前编译环境；
             */
            mode: process.env.VITE_USER_NODE_ENV || "development" || "production"
        })
    ]
});

unocss + options.unit

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /** 
             * 配置所有原子化 CSS 规则的默认单位；
             * 默认 rpx；
             */
            unit: 'rpx'
            unit: (value: string) => Unit
        })
    ]
});

unocss + options.rules

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /** 自定义原子化 CSS 规则 */
            rules: [
                ['w-1', { width: '0.25rem' }],
                ['^m-(\d+)$', ([m, d]) => ({ margin: `${d / 4}rem` })],
                ['^p-(\d+)$', match => ({ padding: `${match[1] / 4}rem` })]
            ]
        })
    ]
});

unocss + options.shortcuts

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /** 自定义原子化 CSS 快捷方式 */
            shortcuts: {
                'btn': 'py-2 px-4',
                'red': 'text-red-100',
                'btn-green': 'text-white bg-green-70'
            }
            shortcuts: [
                { btn: 'py-2 px-4' },
                ['^btn-(.*)$', ([, c]) => `bg-${c}-40 text-${c}-10 py-2`],
            ]
        })
    ]
});

unocss + options.theme

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

/** 此路径根据自己项目路径修改；默认为 uniapp 插件市场导入路径；*/
import viteVueUnocss, { unocss } from './js_sdk/a-hua-unocss';

export default defineConfig({
    plugins: [
        uni(),
        viteVueUnocss({
            /** 预设数组；默认[unocss()] */
            presets: [
                /**
                 * 默认预设；
                 * text-24、uno-text-24、xx-text-24...
                 */
                unocss()
            ],

            /** 主题配置 */
            theme: {
                /** 
                 * 是否读取项目根目录 uni.scss 文件内容生成颜色预设；
                 * 默认 false
                 */
                generator: false,

                /** 自定义颜色预设 */
                colors: {
                    /** text-very-cool */
                    veryCool: '#0000ff',
                    brand: {
                        /** bg-brand-primary */
                        primary: 'hsl(var(--hue, 217) 78% 51%)',

                        /** bg-brand */
                        DEFAULT: '#942192'
                    },
                }
            }
        })
    ]
});

实现以下原子化 CSS 规则

width min-width max-width height min-height max-height padding margin border border-radius position z-index opacity line-height background-color font-size color text-wrap text-indent text-justify text-overflow text-orientation text-rendering text-transform text-align text-align-last text-anchor text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-skip-ink text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-underline-offset text-underline-position font-weight font-stretch font-style font-synthesis white-space white-space-collapse word-break word-spacing flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap grid grid-area grid-auto-columns grid-auto-rows grid-auto-flow grid-column grid-column-end grid-column-start grid-row-end grid-row-start grid-template-columns grid-template-rows list-style list-style-image list-style list-style-type table-layout display justify-content justify-self justify-items align-items align-self content align-content top left right bottom transform transform-box transform-style transform-origin perspective perspective-origin overflow overflow-block overflow-inline overflow-x overflow-y overflow-anchor overflow-clip-margin overflow-wrap gap column-gap gap-row column-count column-fill column-rule column-rule-color column-rule-style column-rule-width column-span column-width object-fit transition transition-property transition-behavior transition-delay transition-duration transition-timing-function line-break line-clamp box-decoration-break box-sizing box-shadow break-after break-before break-inside vertical-align letter-spacing

::after ::before ::selection ::placeholder

:hover :empty :active :enabled :checked :disabled :required :focus :focus-within :focus-visible

Contact

  • 欢迎大家提供建议。

Enjoy!

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...