https://github.com/unocss-applet/unocss-applet
Using UnoCSS in applet(UniApp / Taro) to be compatible with unsupported syntax. 在小程序中使用UnoCSS，兼容不支持的语法。
https://github.com/unocss-applet/unocss-applet
applet miniprogram taro uniapp unocss unocss-preset
Last synced: 14 days ago
JSON representation
Using UnoCSS in applet(UniApp / Taro) to be compatible with unsupported syntax. 在小程序中使用UnoCSS，兼容不支持的语法。
- Host: GitHub
- URL: https://github.com/unocss-applet/unocss-applet
- Owner: unocss-applet
- License: mit
- Created: 2022-08-14T10:57:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T14:51:20.000Z (about 1 year ago)
- Last Synced: 2024-04-12T21:14:59.958Z (about 1 year ago)
- Topics: applet, miniprogram, taro, uniapp, unocss, unocss-preset
- Language: CSS
- Homepage: https://unocss-applet.netlify.app
- Size: 1.51 MB
- Stars: 147
- Watchers: 1
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-uni-app - unocss-applet - applet/unocss-applet) - 在小程序中使用 UnoCSS，兼容不支持的语法。 (Lib 工具库)
- awesome-unocss - unocss-applet - Using UnoCSS in applet (UniApp / Taro). (Presets)
- awesome-unocss - unocss-applet - applet/unocss-applet) - Using UnoCSS in applet (UniApp / Taro) by [@zguolee](https://github.com/zguolee). (Community / Presets)
README
UnoCSS Applet
Using UnoCSS in applet(for UniApp and Taro) to be compatible with unsupported syntax.
English | 简体中文
## Presets and Plugins
- [unocss-applet](https://github.com/unocss-applet/unocss-applet/tree/main/packages/unocss-applet) - The default package with common presets and plugins.
- [@unocss-applet/preset-applet](https://github.com/unocss-applet/unocss-applet/tree/main/packages/preset-applet) - The default preset (right now it's equivalent to `@unocss/preset-uno`).
- [@unocss-applet/preset-rem-rpx](https://github.com/unocss-applet/unocss-applet/tree/main/packages/preset-rem-rpx) - Coverts rem <=> rpx for utils.
- [@unocss-applet/transformer-attributify](https://github.com/unocss-applet/unocss-applet/tree/main/packages/transformer-attributify) - Enables Attributify Mode for applet.
- [@unocss-applet/reset](https://github.com/unocss-applet/unocss-applet/tree/main/packages/reset) - Collection of reset CSS stylesheets.
## Installation
```bash
npm i unocss-applet --save-dev # with npm
yarn add unocss-applet -D # with yarn
pnpm add unocss-applet -D # with pnpm
```
## Usage
### UnoCSS config
uno.config.ts
```ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig } from 'unocss'
import {
presetApplet,
presetRemRpx,
transformerAttributify,
} from 'unocss-applet'
// uni-app
const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false
// taro
// const isApplet = process.env.TARO_ENV !== 'h5' ?? false
const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []
if (isApplet) {
presets.push(presetApplet())
presets.push(presetRemRpx())
transformers.push(transformerAttributify({ ignoreAttributes: ['block'] }))
}
else {
presets.push(presetApplet())
presets.push(presetAttributify())
presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}
export default defineConfig({
presets: [
// ...
...presets,
],
transformers: [
// ...
...transformers,
],
})
```
### For Platform
UniApp + Vue3 + Vite
`vite.config.ts` (UnoCSS v0.58 or below) / `vite.config.mts` (UnoCSS v0.59 or above)
```ts
import uniModule from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
// @ts-expect-error missing types
const Uni = uniModule.default || uniModule
export default defineConfig({
plugins: [
Uni(),
UnoCSS(),
],
})
```
`main.ts`
```ts
import 'uno.css'
```
Taro v3.6 + Vue3 + Webpack5
`config/index.js` (UnoCSS v0.59 or above)
```js
import { createSwcRegister, getModuleDefaultExport } from '@tarojs/helper'
export default async () => {
createSwcRegister({
only: [filePath => filePath.includes('@unocss')],
})
const UnoCSS = getModuleDefaultExport(await import('@unocss/webpack'))
return {
mini: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
}
},
h5: {
// ...
webpackChain(chain) {
chain.plugin('unocss').use(UnoCSS())
}
}
}
}
```
`config/index.js` (UnoCSS v0.58 or below)
```js
import UnoCSS from 'unocss/webpack'
const config = {
mini: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
},
},
h5: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
},
},
}
```
`app.ts`
```ts
import 'uno.css'
```
## Example
- [starter-uni](https://github.com/nei1ee/starter-uni)
- [ColorTimetable](https://github.com/nei1ee/ColorTimetable)
## Acknowledgement
- [UnoCSS](https://github.com/unocss/unocss)
## License
MIT License © 2022-PRESENT [Neil](https://github.com/nei1ee) and all contributors.