更新记录

1.3.6(2024-11-21) 下载此版本

查找 class name 时排除注释代码;减少多余资源;

1.3.5(2024-11-20) 下载此版本

修复动态 class name 匹配三元表达式问题;

1.3.4(2024-11-20) 下载此版本

border 调整函数支持透明度书写;border-red-[number / 100]

查看更多

平台兼容性

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 uni from '@dcloudio/vite-plugin-uni';

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

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

unocss

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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

/** 此路径根据自己项目路径修改;默认为 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协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问