【uniapp引入unocss】

最新推荐文章于 2024-09-17 15:00:17 发布

THIM

最新推荐文章于 2024-09-17 15:00:17 发布

阅读量2.4k

点赞数 3

文章标签： uni-app vue.js javascript

本文链接：https://blog.csdn.net/qq_50767141/article/details/130049155

版权

该文章指导如何在Vite项目中集成uni-app和Unocss。首先，需在vite.config.ts中引入并配置uni-app和Unocss插件。接着，安装并创建unocss.config.ts文件，设置preset-weapp和transformers。在main.ts中引入uno.css。最后，可以在组件中使用新配置进行样式渲染。

摘要由CSDN通过智能技术生成

第一步

打开 vite.config.ts

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import Unocss from 'unocss/vite'
export default defineConfig({
  plugins: [uni(), Unocss()],
});

第二步

创建 unocss.config.ts

2.1 下载安装

pnpm i unocss unocss-preset-weapp

pnpm i unocss

2.2 写入下面代码

import presetWeapp from 'unocss-preset-weapp'

import { transformerClass, transformerAttributify } from 'unocss-preset-weapp/transformer';

export default ({
    presets: [
        presetWeapp()
    ],
    transformers: [
        transformerAttributify(),
        transformerClass()
    ],
    shortcuts: [
        { center: 'flex items-center justify-center' }
    ]
    
})

第三步

写入 main.ts

import { createSSRApp } from "vue";
import App from "./App.vue";
import 'uno.css'

export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}