uniapp+ts中如何使用unocss？

1、unocss是什么

原子化CSS是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。unocss则是一个具有高性能且极具灵活性的即时原子化 CSS 引擎。unocss介绍

优点：

• 把常见的css转变为类或属性
• 自定义样式并指定类名
• 按需加载需要的css类

2、安装unocss

"unocss": "^0.53.6",
"unocss-preset-weapp": "^0.53.7"

3、vite.config.ts

import Unocss from "unocss/vite"
plugins: [
      uni(),
      Unocss(),
]

4、修改main.ts

import "uno.css"

5、创建unocss.config.ts

增加前缀uno-防止与tmui等自带的类名冲突

import presetWeapp from "unocss-preset-weapp"
import { extractorAttributify, transformerClass } from "unocss-preset-weapp/transformer"
import { defineConfig } from "unocss"
// 可以写属性会自动增加class,也可以写class
const prefix = "uno-"
const { presetWeappAttributify, transformerAttributify } = extractorAttributify({ classPrefix: prefix })

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({ prefix }),
    // attributify autocomplete
    presetWeappAttributify()
  ],
  shortcuts: [
    {
      "uno-center": "uno-flex uno-justify-center uno-items-center"
    }
  ],

  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass()
  ]
})

6、vscode配置

vscode版本1.80.1 安装插件unocssv0.53.6

然后在标签class中写类名前缀uno-会有提示,常见类名从这里查询传送,官网使用例子

7、使用vue-scoped模式

vue-scoped This mode will inject generated CSS to Vue SFCs <style scoped> for isolation.
该模式将生成的CSS注入Vue SFC<style scoped>进行分离。

1、修改vite.config.ts文件

import Unocss from "unocss/vite"
plugins: [
      uni(),
      Unocss({mode: "vue-scoped"}),
]

2、删除main.ts中的引入
否则会报错，Failed to resolve import "uno.css" from "src\main.ts". Does the file exist?

import "uno.css"// 删除这一行

重新生成的样式带有属性

8、vite启动报错

报错 TypeError: commandResult.toString(...).replaceAll is not a function node版本不能低于15，安装16.19.1版本报错消失

参考

如何在vue中使用unocss以及基本使用方法
unocss-preset-weapp例子