更新hbuilder最新版
创建一个uniapp项目,找到manifest.json文件,vue版本选择3
安装依赖:
npm i -D vite-plugin-windicss windicss
创建vite.config.js
import WindiCSS from 'vite-plugin-windicss'
import {
defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
plugins: [
WindiCSS({
scan: {
dirs: ['.'], // 当前目录下所有文件
fileExtensions: ['vue', 'js', 'ts'], // 同时启用扫描vue/js/ts
},
}),
uni(),
],
})
- 5.main.js文件引入
import 'virtual:windi.css';
- 运行项目、测试类名
<view class="bg-red-300">hello,word!</view>
- 如下效果,便是好了