在 uniapp 里面使用 unocss

1. 安装插件

npm i unocss @unocss/transformer-directives unocss-preset-weapp -D 这个里面加了个指令的使用, 可以根据自身需求来决定是否使用

2. uno.config.ts 配置。

按照这个配置基本可以解决你的问题。

import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { defineConfig } from 'unocss/vite'
import transformerDirectives from '@unocss/transformer-directives'const { presetWeappAttributify, transformerAttributify } = extractorAttributify()export default defineConfig({// @ts-expect-error 插件类型不匹配presets: [presetWeapp(), presetWeappAttributify()],transformers: [transformerDirectives({enforce: 'pre',}),// @ts-expect-error 插件类型不匹配transformerAttributify(),// @ts-expect-error 插件类型不匹配transformerClass(),],
})

如果你想使用 unocss 的指令一定要看下面的, 如果你可以确定不使用那就可以不看

你会遇到的问题：
在配置了指令之后, 大概率会在 h5 里面遇到 rpx 无法转换为 rem。

解决方法:
配置 transformerDirectives({ enforce: 'pre', }),

这是 vite 官方对这个字段的解释:
一个 Vite 插件可以额外指定一个 enforce 属性（类似于 webpack 加载器）来调整它的应用顺序。enforce 的值可以是pre 或 post。解析后的插件将按照以下顺序排列： vite文档地址

为什么要这样配置呢, 我们想一下, 在小程序里面使用的单位是 rpx, 在 h5 里面使用的是 rem, 为什么我们在使用 uniapp 的时候可以直接写 rpx, 因为 uniapp 的插件在内部处理了, 在编译小程序或者 h5 的时候是做了对应的处理的.

这个时候我们就要想一下为什么添加了指令之后 rpx 就无法被转换了为 rem 了呢, 因为 unocss 里面的 transformers 执行顺序是后置与 uniapp 插件的, 所以指令生成的 rpx 是无法被 uniapp 插件处理到的

我们来看import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'这个插件的源码, 这个插件的 transformer 都配置了 enforce: 'pre', 以下是部分源码。代码地址

 {name: 'transformer-weapp-class',idFilter,enforce: 'pre',transform(code, id) {let newCode = transformCode(code.toString(), options.transformRules)if (options.classTags) {const classNames = getClass(code.toString())const injectStr = Array.from(new Set(classNames.map(x => x[1]).filter(x => x).flatMap(x => x.split(' ')))).join(' ')if (vueFilter(id))newCode = newCode.replace('<template>', `<template>\n<!-- ${injectStr} -->\n`)elsenewCode = `/* ${injectStr} */\n${newCode}`}code.overwrite(0, code.original.length, newCode)},}

下面是我的 vite.config.ts, 这个文件基本不会影响到 unocss 的处理逻辑

import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
import UnoCSS from 'unocss/vite'// import Components from 'unplugin-vue-components/vite'import Components from '@uni-helper/vite-plugin-uni-components'// https://vitejs.dev/config/
export default defineConfig({plugins: [UnoCSS(),AutoImport({imports: ['vue', 'pinia'],dts: './typing/auto-imports.d.ts',}),Components({dirs: ['src/components/', 'src/uni_modules/hex-ui/', 'src/uni_modules/z-paging/components/'],dts: './typing/components.d.ts',}),uni(),],resolve: {alias: {'@': resolve(__dirname, './src'),'@components': resolve(__dirname, './src/components/'),},},
})