集成winddicss

一、背景介绍

2021年开始，国外很流行原子化css框架（tailwindcss、windicss）。

目前国内使用的人还不是很多；

1. 一些人持有反对意见，觉得很麻烦，很像内联样式。
2. 另外一些人，觉得有帮助，能解决自己开发中遇到的问题（我就是支持者）。

通过对比，个人认为windicss比tailwindcss好用许多，下面介绍一下如何在uniapp使用windicss

二、集成步骤

1）更新hbuilder最新版

2）创建一个uniapp项目，找到manifest.json文件，vue版本选择3

3）安装依赖：

yarn add -D vite-plugin-windicss windicss
复制代码

4）创建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'
复制代码

6. 运行项目、并测试类名

<view class="bg-red-500">你好，世界！</view>
复制代码