这里是UnoCSS的官网介绍
UnoCS通过简化和优化CSS的编写过程来提高Web开发的效率和可维护性。好处是:
- 提升开发效率
- 提升开发效率
- 提高一致性
- 增强灵活性
- 易于维护
- 方便的集成与配置
同时还支持预设变量和规则。这些可参看官网进行配置。Unocss通过其原子化方法、高度的可定制性和强大的集成能力,为开发提供了一个高效、灵活且易于维护的CSS。
使用
1. 安装
// 安装
// 目前时间点来说推荐0.58.9 因为还要集成uviewplus,高版本会出现报错不兼容
npm i unocss@0.58.9 unocss-preset-weapp -D
2. 创建文件 uno.config.ts 和 unocss.config.ts 文件
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// 这里可以配置其他变量和规则
})
// unocss.config.ts
import presetWeapp from 'unocss-preset-weapp'
import { transformerClass, transformerAttributify } from 'unocss-preset-weapp/transformer';
export default ({
presets: [
presetWeapp()
],
transformers: [
transformerAttributify(),
transformerClass()
],
shortcuts: []
})
3. main.js/ts中引入
// ....
import 'uno.css'
// ...
4. 使用
已经可以使用了。