README_zh.md

English | 简体中文

这个库就是把 css 转成 unocss 的。 unocss 可以更好的复用样式减少打包体积，可以转化为一种性能优化的方式，也可以让老项目更容易升级到 unocss。如果你是 tailwindcss 的使用者，可以尝试一下 transformToTailwindcss.

📦 Install

  npm i -g transform-to-unocss

🦄 cli

  ## command: tounocss + directory
  tounocss playground

  ## revoke: tounocss + directory + --revert
  tounocss payground --revert

🌈 Usage

Vite

// vite.config.ts
import { viteTransformToUnocss } from 'transform-to-unocss'
export default defineConfig({
  plugins: [viteTransformToUnocss(/* options */)],
})

Rollup

// rollup.config.js
import { resolve } from 'node:path'
import { rollupTransformToUnocss } from 'transform-to-unocss'
export default {
  plugins: [rollupTransformToUnocss(/* options */)],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('transform-to-unocss').webpackTransformToUnocss({
      /* options */
    }),
  ],
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('transform-to-unocss').webpackTransformToUnocss({
        /* options */
      }),
    ],
  },
}

Esbuild

// esbuild.config.js
import { build } from 'esbuild'
import { esbuildTransformToUnocss } from 'transform-to-unocss'

build({
  plugins: [esbuildTransformToUnocss(/* options */)],
})

⭐ Feature

• 支持 css 在 '.html' | '.tsx' | '.vue' | '.astro' | '.svelte' 转换到 unocss
• 支持 sass less stylus 类型的转换
• 支持 vite | rollup | webpack | vue-cli | esbuild 作为插件使用
• vscode 扩展 To Unocss

🚁 More

• transform-to-unocss-core - 提供浏览器端转换 css 为 unocss 的能力

编译前

编译后

☕

请我喝一杯咖啡

License

MIT