Quasar项目中集成unocss解决方案，又Get一个

前言

今天接手别人的quasar项目要写一个适配PC和手机的页面，想着接入unocss方便点~~~ 结果浪费了半个下午

期间各种踩坑，照着文档引入不成功，去github搜解决方案，始终在我的项目中报错...

最后总归是解决了， 这里贴下踩坑指南

正文

1. 安装unocss

yarn add -D unocss@0.55.7

注意：这里不要安装最新版的unocss，本地启动服务后页面会报下面这个错

亲测此坑~~~

"vite Internal server error: Failed to resolve import "uno.css" from "src\boot\unocss.ts". Does the file exist?"

2. src/boot目录下新建unocss.js

import 'virtual:uno.css'

这里面只要引用unocs的包就行了

3. 根目录quasar.config.js中修改配置

module.exports = configure(function (/* ctx */) {
    return {
        boot: [
          //...
          "unocss" // 钩子触发unocss.js
        ],
        build: {
          // ...
          vitePlugins: [
            ["unocss/vite", {}],
          ]
        }
    }
}

4. 根目录新建uno.config.js

小伙伴们可在里面写一些自定义的配置

import { defineConfig } from "unocss";

export default defineConfig({
  theme: {
    // ...
    colors: {
      'primary': '#0f70e6',
    },
  }
});

总结

这篇文章把踩坑指南放到这了，希望对小伙伴有帮助。

欢迎转载，但请注明来源。

最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。