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

前言

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

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

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

正文

1. 安装unocss

js 复制代码
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

js 复制代码
import 'virtual:uno.css'

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

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

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

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

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

js 复制代码
import { defineConfig } from "unocss";

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

总结

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

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

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

相关推荐
Spider_Man14 分钟前
打造属于你的前端沙盒 🎉
前端·typescript·github
用户479492835691517 分钟前
🤫 你不知道的 JavaScript:`"👦🏻".length` 竟然不是 1?
前端·javascript·面试
掘金一周18 分钟前
凌晨零点,一个TODO,差点把我们整个部门抬走 | 掘金一周 9.11
前端·人工智能·后端
用户81744134274821 分钟前
kubernetes核心概念 Service
前端
xingkongv21 分钟前
从“调接口仔”到“业务合伙人”:前端的 DDD 初体验
javascript·前端框架
东北南西29 分钟前
Web Worker 从原理到实战 —— 把耗时工作搬到后台线程,避免页面卡顿
前端·javascript
Zz_waiting.31 分钟前
案例开发 - 日程管理 - 第六期
前端·javascript·vue.js·路由·router
A 风31 分钟前
封装日期选择器组件,带有上周,下周按钮
开发语言·javascript·vue.js
袁煦丞38 分钟前
企业微信开发者的‘跨网穿梭门’:cpolar内网穿透实验室第499个成功挑战
前端·程序员·远程工作
Simon_He42 分钟前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown