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',
    },
  }
});

总结

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

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

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

相关推荐
mCell9 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip9 小时前
Node.js 子进程:child_process
前端·javascript
excel12 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel13 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼15 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping15 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙16 小时前
[译] Composition in CSS
前端·css
白水清风16 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix16 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780016 小时前
new、原型和原型链浅析
前端·javascript