uni-app 之 安装uView,安装scss/sass编译

uni-app 之 安装uView,安装scss/sass编译

image.png

image.png

image.png

点击HBuilder X 顶部,工具,插件安装,安装新插件

image.png

image.png

安装成功!

注意,一定要先登录才可以安装

image.png

1. 引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

复制代码
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

image.png

#2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

复制代码
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

image.png

#3. 引入uView基础样式

注意!

App.vue首行的位置引入,注意给style标签加入lang="scss"属性

复制代码
<style lang="scss">
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

image.png



然后就可以正常使用啦~

相关推荐
工业HMI实战笔记19 小时前
工业HMI界面布局“1核2辅”黄金结构,适配90%场景
前端·ui·性能优化·自动化·交互
橘子星19 小时前
从零手写 RAG 语义检索:基于 Node.js 实现轻量级向量搜索
javascript·人工智能
林希_Rachel_傻希希20 小时前
web性能优化之————图片效果
前端·javascript·面试
橘子星20 小时前
基于 MCP 协议实现本地文件读取工具服务开发实践
javascript·人工智能
Darling噜啦啦20 小时前
前端存储与 this 指向完全指南:从 LocalStorage 实战到 call/apply/bind 深度解析
前端·javascript
sugar__salt20 小时前
手撕字符串算法:反转、回文、验证回文 Ⅱ 完整拆解
javascript·算法·面试·职场和发展
wei19862120 小时前
.net添加web引用和添加服务引用有什么区别?
java·前端·.net
To_OC20 小时前
从一行报错开始,把字符串反转、回文算法连带着包装类一起捋明白
javascript·算法·api
蜡台20 小时前
Node 安装 awesome-qr 失败解决
javascript·vue·qrcode·awesome-qr
格子软件21 小时前
2026年GEO优化系统源码级状态机与多模型调度拆解
java·前端·vue.js·人工智能·vue·geo