hdliyu/unocss-wechat

unocss use in miniprogram, 原生小程序 unocss demo

unocss-wechat

English | 简体中文

miniprogram，unocss example

---

related links

• UnoCSS - the instant on-demand atomic css engine.
• unocss-preset-weapp - the unocss preset for wechat miniprogram.

---

set unocss preset

two methods to choose from

method one： use common configuration

this method uses the built-in presets in unocss and solves the following configuration

1. solve the problem that the small program does not support the * selector
2. rem unit to rpx

1. use npm in miniprogram，install unocss

npm -D unocss

2. unocss.config

import { defineConfig, presetUno } from "unocss";

const remRE = /^-?[\.\d]+rem$/

export default defineConfig({
    presets: [
      presetUno(),
    ],
    theme:{
      // 解决小程序不支持 * 选择器
      preflightRoot: ["page,::before,::after"]
    },
    postprocess(util) {
      // 自定义rem 转 rpx
      util.entries.forEach((i) => {
        const value = i[1]
        if (value && typeof value === 'string' && remRE.test(value))
          i[1] = `${value.slice(0, -3) * 16 * 2}rpx`
      })
    },
  })

---

method two： use unocss-preset-weapp

this method uses the unocss-preset-weapp preset, which solves the following configuration

because the miniprogram does not support escape class, like \ \: \[ \$ \., so need transform bg-#81ecec/50 to bg-hex-81ecec_50

• use 'hex' instead of '#' , _ instead of : /

  • for example, bg-#81ecec/50 can be converted to bg-hex-81ecec_50

• for 'hover: and active:, separators can be set to specify the separator

  • for example, setting separators to __, hover:bg-red-500 can be converted to hover__bg-red-500

1. use npm in miniprogram，install unocss unocss-preset-weapp

npm -D unocss unocss-preset-weapp

---

2. unocss.config

import { defineConfig } from "unocss";
import presetWeapp from 'unocss-preset-weapp'

const include = [/\.wxml$/]

export default defineConfig({
  content:{
    pipeline:{
      include
    }
  },
  presets: [
    presetWeapp(),
  ],
  separators:'__'
})

---

generate unocss.wxss

3. package.json，setting script

use @unocss/cli to listen to file content，documents

{
  "scripts": {
     "unocss": "unocss pages/**/*.wxml -c unocss.config.js --watch -o unocss.wxss",
     "unocss:build": "unocss pages/**/*.wxml -c unocss.config.js -o  unocss.wxss"
  }
}

---

4. run npm run unocss

wxml content changes, trigger the generation of new unocss.wxss

---

5. import unocss.wxss

in app.wxss, impoort generated unocss.wxss

/**app.wxss**/
@import "./unocss.wxss";

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 200rpx 0;
  height: 100%;
}

---

use vscode unocss plugin

• vscode settings.json

  // 文件类型
"files.associations": {
  "*.wxml": "html",
},

---

transformer

using transformer in mini programs will change the original file and is not recommended

• unocss.config.js

add transformerClass，setting include wxml

import { defineConfig } from "unocss";
import presetWeapp from 'unocss-preset-weapp'
import { transformerClass } from 'unocss-preset-weapp/transformer';

const include = [/\.wxml$/]

export default defineConfig({
  content:{
    pipeline:{
      include
    }
  },
  presets: [
    presetWeapp(),
  ],
  
  transformers:[
    transformerClass({
      include
    })
  ]
})

Additional Notes

• At this time, the box-shadow shorthand notations like , and [ aren't compatible with native mini-programs. This is due to certain restrictions on the platform that prevent the transformer from processing these notations. Therefore, a straightforward solution isn't available. We suggest using the pre-configured settings instead. If these don't suffice, feel free to write your own CSS. You can find more discussion on this topic in this thread.