在HBuilderX创建的uniapp项目中使用unocss

该文仅针对HBuilderX创建的uniapp Vue3项目使用unocss做个总结

十分感谢 Uni Helper 提供的参考代码

1.在HBuilderX项目中安装依赖

参考：uni-helper/unocss-preset-uni: 专为 uni-app 打造的 UnoCSS 预设

bash 复制代码

pnpm add @uni-helper/unocss-preset-uni@0.2.11 unocss@65.4.0 -D

2.创建uno.config.js

在项目根目录中创建uno.config.js

javascript 复制代码

// uno.config.js
import { presetUni } from '@uni-helper/unocss-preset-uni'
import {
  defineConfig,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUni(),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
      // HBuilderX 必须针对要使用的 Collections 做异步导入
      // collections: {
      //   carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
      // },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

参考：vitesse-uni-app/uno.config.ts at main · uni-helper/vitesse-uni-app

3.修改根目录下的vite.config.js

如果你的根目录下面没有这个文件就创建一个，原始内容如下

参考：uni-app官网

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	plugins: [uni()],
});

修改一下，加入UnoCss插件

javascript 复制代码

// vite.config.ts
import {
	defineConfig
} from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'

export default async () => {
	const UnoCSS = (await import('unocss/vite')).default

	return defineConfig({
		plugins: [
			Uni(),
			UnoCSS()
		]
	})
}

参考：uni-helper/unocss-preset-uni: 专为 uni-app 打造的 UnoCSS 预设

如果你是Vue2项目，可以参考unocss关于webpack配置相关的文档进行对应修改：UnoCSS Webpack Plugin

4.在main.js中引入uno.css文件

javascript 复制代码

// main.js
import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
import {
	setupI18n
} from './locale'
import 'uno.css' // 这里引入uno.css文件
export function createApp() {
	const app = createSSRApp(App)
	setupI18n(app)
	return {
		app
	}
}
// #endif

5.使用

html 复制代码

<template>
	<view class="flex items-center justify-center space-x-[30rpx]">
		<view class="size-[200rpx] bg-red"></view>
		<view class="size-[200rpx] bg-blue"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

运行查看效果，H5、微信小程序、Android