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

总结

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

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

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

相关推荐
葡萄城技术团队8 分钟前
提升 Web 端 JavaScript 的可信度:WAICT 体系详解
javascript
yangwan8 分钟前
Ubunut 22.04 安装 Docker 24.0.x
前端·后端
等风起8818 分钟前
Element Plus实现TreeSelect树形选择在不同父节点下子节点有相同id的双向绑定联动
前端·javascript
摸着石头过河的石头9 分钟前
跨域资源共享(CORS)完全指南:从基础概念到实际应用
前端·javascript
小胖霞10 分钟前
阿里云域名解析 + Nginx 反向代理 + HTTPS 全流程:从 IP 访问到加密域名的完整配置
前端
2301_8012522211 分钟前
Vue中的指令
前端·javascript·vue.js
烛阴12 分钟前
彻底搞懂Lua闭包
前端·lua
散峰而望31 分钟前
基本魔法语言分支和循环 (二) (C语言)
c语言·开发语言·github·visual studio
天***889634 分钟前
Chrome扩展安装插件教程,Edge安装插件扩展教程,浏览器安装扩展程序方法
前端·chrome·edge
期待のcode1 小时前
gitee与github远程仓库
gitee·github