更新记录
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!