uniapp集成windicss的流程
发布于 3 年前 作者 yxue 3758 次浏览 来自 分享

一、背景介绍

2021年开始,国外很流行原子化css框架(tailwindcss、windicss)。

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

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

通过对比,个人认为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'
  1. 运行项目、并测试类名
<view class="bg-red-500">你好,世界!</view>
  1. 如下效果,那恭喜你,完成了

三、如果有用的话,点赞支持一下哈。

回到顶部