微信原生小程序接入 unocss

难点：没整过

知识点：unocss，unocss-preset-weapp

1.还是先下载依赖，这里应该先构建npm（参考链接）

npm add -D unocss unocss-preset-weapp

 2.配置unocss.config.ts

这里有个坑，微信原生小程序，某些字符会变成空格，需要预设一下，不过不建议大家这么写，可读性和可维护性都不行，然后写的时候还得对照着写，个人感觉纯粹脱裤子放屁，还是单独的自定义一个class名写比较好，不过人各有所爱，我都列出来，看情况取自己需要的

2.1简略版

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

const include = [/\.wxml$/]

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

2.2转义版

比如【left-[calc(76%-64rpx)]】就不能直接写，需要转义，这个转义的预设可以自己设定，建议设置的复杂一点，我这个是从unocss-preset-weapp直接cv过来的转义成这样即可：

【left--f111l-calc-b111l-76-p111--64rpx-b111r--f111r-】

import { defineConfig } from "unocss";
import presetWeapp from 'unocss-preset-weapp';
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
const transformRules = {
  '.': '-d111-',
  '/': '-s111-',
  ':': '-c111-',
  '%': '-p111-',
  '!': '-e111-',
  '#': '-w111-',
  '(': '-b111l-',
  ')': '-b111r-',
  '[': '-f111l-',
  ']': '-f111r-',
  '$': '-r111-',
  ',': '-r222-',
}
const { presetWeappAttributify, transformerAttributify } = extractorAttributify({
  transformRules
})
const include = [/\.wxml$/]

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      transformRules,
    }),
    // attributify autocomplete
    presetWeappAttributify()
  ],
  content:{
    pipeline:{
      include
    }
  },
  transformers: [
    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass({
      transformRules,
    }),
  ],
  separators:'__'
})

3.package.json中接入命令，监听wxml文件将你新写的class打包入一个新的wxss文件中

终端npm run unocss，一直运行的就行

{
  "name": "xiangmuming",
  "version": "1.0.0",
  "description": "项目说明",
  "main": "app.js",
  "scripts": {
    "unocss": "unocss */**/*.wxml -c unocss.config.js --watch -o unocss.wxss",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "unocss": "^0.58.3",
    "unocss-preset-weapp": "^0.58.0"
  }
}

4.插入app.wxss中

@import '/unocss.wxss';

5.自定义组件中如果需要的话还得再配置一下，一定要记得，否则写了也不生效

Component({
  options: {
    addGlobalClass: true
  },
})

6.大功告成，默认兼容tailwindCss，这个很爽啊！更多玩法可以去官网看看

别的端可以也接入tailwindCSS，看我写的博文

react 接入 unocss 

vue3、react和taro/react配置tailwindCSS

hbx/uni3/vite/微信小程序 接入unocss