uniapp集成windicss的流程
一、背景介绍
2021年开始,国外很流行原子化css框架(tailwindcss、windicss)。
目前国内使用的人还不是很多;
- 一些人持有反对意见,觉得很麻烦,很像内联样式。
- 另外一些人,觉得有帮助,能解决自己开发中遇到的问题(我就是支持者)。
通过对比,个人认为windicss比tailwindcss好用许多,下面介绍一下如何在uniapp使用windicss
二、集成步骤
1)更新hbuilder最新版
2)创建一个uniapp项目,找到manifest.json文件,vue版本选择3
3)安装依赖:
cnpm i -D vite-plugin-windicss windicss
4)创建vite.config.js
import WindiCSS from 'vite-plugin-windicss'
import {
defineConfig
} from 'vite'
import uni from '[@dcloudio](/user/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-500">你好,世界!</view>
- 如下效果,那恭喜你,完成了
三、如果有用的话,点赞支持一下哈。