uniapp集成windicss原子样式库的用法_uniapp使用windcss

更新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(),
	],
})

1. 5.main.js文件引入

import 'virtual:windi.css';

1. 运行项目、测试类名

<view class="bg-red-300">hello,word!</view>

1. 如下效果，便是好了