今天刚新建一个微信小程序,之前写过一篇《原子化CSS:Unocss的使用》,想着"偷懒"不想定义各种css样式类,于是准备把unocss引入进来使用。
安装与配置
1.安装依赖
npm add -D unocss unocss-preset-weapp
2.配置unocss.config.ts
import { defineConfig } from "unocss";
import presetWeapp from 'unocss-preset-weapp'
const include = [/\.wxml$/]
export default defineConfig({
content:{
pipeline:{
include
}
},
presets: [
presetWeapp(),
],
// 自定义规则
rules: [],
separators:'__'
})
3.在 package.json 中添加脚本命令,用于监听 wxml 文件并生成 wxss 文件:
"scripts": {
"unocss": "unocss pages/**/*.wxml -c unocss.config.js --watch -o unocss.wxss"
}
4.插入app.wxss中:
@import '/unocss.wxss';
5.自定义组件
中如果需要的话还得再配置一下,否则写了也不生效:
Component({
options: {
addGlobalClass: true
},
})
6.启动监听:
npm run unocss
可能遇到的问题
1.单位换算不统一:
使用过程中会发现,对于width/height和padding/magin的单位换算是不一样的,比如:w-400和p-40:
关于这个问题,在github上的issues中也有人提到了:
① https://github.com/MellowCo/unocss-preset-weapp/issues/123
②https://github.com/MellowCo/unocss-preset-weapp/issues/116
当然在unocss-preset-weapp文档中也简略的说了如何解决这个问题:
因此只要在unocss.config.ts中定义rules进行覆盖就可以了,最终unocss.config.ts配置:
import { defineConfig } from "unocss";
import presetWeapp from 'unocss-preset-weapp'
const include = [/\.wxml$/]
export default defineConfig({
content:{
pipeline:{
include
}
},
presets: [
presetWeapp(),
],
rules: [
[/^p-(\d+)$/, ([, d]) => ({ padding: `${d}rpx` })],
[/^pt-(\d+)$/, ([, d]) => ({ 'padding-top': `${d}rpx` })],
[/^pb-(\d+)$/, ([, d]) => ({ 'padding-bottom': `${d}rpx` })],
[/^pl-(\d+)$/, ([, d]) => ({ 'padding-left': `${d}rpx` })],
[/^pr-(\d+)$/, ([, d]) => ({ 'padding-right': `${d}rpx` })],
[/^m-(\d+)$/, ([, d]) => ({ margin: `${d}rpx` })],
[/^mt-(\d+)$/, ([, d]) => ({ 'margin-top': `${d}rpx` })],
[/^mb-(\d+)$/, ([, d]) => ({ 'margin-bottom': `${d}rpx` })],
[/^ml-(\d+)$/, ([, d]) => ({ 'margin-left': `${d}rpx` })],
[/^mr-(\d+)$/, ([, d]) => ({ 'margin-right': `${d}rpx` })]
],
separators:'__'
})
效果预览: