微信小程序引入unocss

今天刚新建一个微信小程序，之前写过一篇《原子化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.自定义组件中如果需