{"id":32429411,"url":"https://github.com/mellowco/unocss-wechat","last_synced_at":"2025-10-25T20:52:36.667Z","repository":{"id":105477755,"uuid":"536438253","full_name":"MellowCo/unocss-wechat","owner":"MellowCo","description":"unocss use in miniprogram, 原生小程序 unocss demo","archived":false,"fork":false,"pushed_at":"2024-03-02T01:01:04.000Z","size":292,"stargazers_count":32,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-24T03:34:37.493Z","etag":null,"topics":["miniprogram","unocss","wechat","wechat-mini-program"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MellowCo.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-09-14T06:12:35.000Z","updated_at":"2025-05-24T05:22:27.000Z","dependencies_parsed_at":"2023-09-24T07:18:51.913Z","dependency_job_id":null,"html_url":"https://github.com/MellowCo/unocss-wechat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MellowCo/unocss-wechat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-wechat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-wechat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-wechat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-wechat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MellowCo","download_url":"https://codeload.github.com/MellowCo/unocss-wechat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-wechat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281019445,"owners_count":26430647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["miniprogram","unocss","wechat","wechat-mini-program"],"created_at":"2025-10-25T20:52:11.619Z","updated_at":"2025-10-25T20:52:36.659Z","avatar_url":"https://github.com/MellowCo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cH1 align='center'\u003e\nunocss-wechat\n\u003c/H1\u003e\n\n\n\u003cp align='center'\u003e\n\u003cb\u003eEnglish\u003c/b\u003e | \u003ca href=\"https://github.com/MellowCo/unocss-wechat/blob/main/readme.zh-CN.md\"\u003e简体中文\u003c/a\u003e\n\u003c/p\u003e\n\nminiprogram，unocss example\n\n![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202209141354363.gif)\n\n---\n\nrelated links\n* [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand atomic css engine.\n* [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp) - the unocss preset for wechat miniprogram.\n\n---\n## set unocss preset\n\u003e two methods to choose from\n\n### method one： use common configuration\n\u003e this method uses the built-in presets in `unocss` and solves the following configuration\n\u003e\n\u003e 1. solve the problem that the small program does not support the * selector\n\u003e 2. rem unit to rpx\n\n1. [use npm in miniprogram](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)，install `unocss`\n\n```sh\nnpm -D unocss\n```\n\n2. unocss.config\n\n```js\nimport { defineConfig, presetUno } from \"unocss\";\n\nconst remRE = /^-?[\\.\\d]+rem$/\n\nexport default defineConfig({\n    presets: [\n      presetUno(),\n    ],\n    theme:{\n      // 解决小程序不支持 * 选择器\n      preflightRoot: [\"page,::before,::after\"]\n    },\n    postprocess(util) {\n      // 自定义rem 转 rpx\n      util.entries.forEach((i) =\u003e {\n        const value = i[1]\n        if (value \u0026\u0026 typeof value === 'string' \u0026\u0026 remRE.test(value))\n          i[1] = `${value.slice(0, -3) * 16 * 2}rpx`\n      })\n    },\n  })\n```\n\n---\n### method two： use unocss-preset-weapp\n\n\u003e this method uses the `unocss-preset-weapp` preset, which solves the following configuration\n\u003e\n\u003e because the miniprogram does not support escape class, like `\\` `\\:` `\\[` `\\$` `\\.`, so need transform  `bg-#81ecec/50` to `bg-hex-81ecec_50`\n\n- use 'hex' instead of '#' , `_` instead of `:` `/`\n    * for example, `bg-#81ecec/50` can be converted to `bg-hex-81ecec_50`\n\n- for '`hover:` and `active:`, `separators` can be set to specify the separator\n    * for example, setting `separators` to `__`, `hover:bg-red-500` can be converted to `hover__bg-red-500`\n\n\n1. [use npm in miniprogram](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)，install `unocss unocss-preset-weapp`\n\n```shell\nnpm -D unocss unocss-preset-weapp\n```\n\n---\n2. unocss.config\n\n```js\nimport { defineConfig } from \"unocss\";\nimport presetWeapp from 'unocss-preset-weapp'\n\nconst include = [/\\.wxml$/]\n\nexport default defineConfig({\n  content:{\n    pipeline:{\n      include\n    }\n  },\n  presets: [\n    presetWeapp(),\n  ],\n  separators:'__'\n})\n```\n\n---\n## generate unocss.wxss\n\n3. `package.json`，setting `script`\n\u003e use `@unocss/cli` to listen to file content，[documents](https://github.com/unocss/unocss/tree/main/packages/cli)\n```json\n{\n  \"scripts\": {\n     \"unocss\": \"unocss pages/**/*.wxml -c unocss.config.js --watch -o unocss.wxss\",\n     \"unocss:build\": \"unocss pages/**/*.wxml -c unocss.config.js -o  unocss.wxss\"\n  }\n}\n```\n\n\n---\n4. run `npm run unocss`\n\u003e `wxml` content changes, trigger the generation of new `unocss.wxss`\n\n![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202209141401533.png)\n\n\n---\n5. import `unocss.wxss`\n\u003e  in `app.wxss`, impoort generated ` unocss.wxss`\n\n```css\n/**app.wxss**/\n@import \"./unocss.wxss\";\n\n.container {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 200rpx 0;\n  height: 100%;\n}\n```\n\n![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202209141354363.gif)\n\n---\n## use vscode `unocss` plugin\n* vscode `settings.json`\n\n```json\n  // 文件类型\n\"files.associations\": {\n  \"*.wxml\": \"html\",\n},\n```\n\n\u003cimg src=\"https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202209212036840.gif\" style=\"zoom:50%;\" /\u003e\n\n---\n## transformer\n\nusing `transformer` in mini programs will change the original file and is not recommended\n\n* unocss.config.js\n\u003e add `transformerClass`，setting include `wxml`\n```js\nimport { defineConfig } from \"unocss\";\nimport presetWeapp from 'unocss-preset-weapp'\nimport { transformerClass } from 'unocss-preset-weapp/transformer';\n\nconst include = [/\\.wxml$/]\n\nexport default defineConfig({\n  content:{\n    pipeline:{\n      include\n    }\n  },\n  presets: [\n    presetWeapp(),\n  ],\n  \n  transformers:[\n    transformerClass({\n      include\n    })\n  ]\n})\n```\n\n![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202209212019320.gif)\n\n## Additional Notes\n\n- 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](https://github.com/MellowCo/unocss-preset-weapp#box-shadow) 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](https://github.com/MellowCo/unocss-preset-weapp/issues/92).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmellowco%2Funocss-wechat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmellowco%2Funocss-wechat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmellowco%2Funocss-wechat/lists"}