uniapp 13--uniapp样式的学习及如何使用scss和字体图标

最新推荐文章于 2025-11-08 10:30:47 发布
原创 最新推荐文章于 2025-11-08 10:30:47 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了uniapp中的样式应用，深入讲解了rpx单位的等比特性，以及如何在项目中有效利用SCSS进行样式编写。通过实例演示了局部与全局样式的作用范围，特别关注了字体图标和变量覆盖的问题。

uniapp样式的学习及如何使用scss和字体图标

在这里插入图片描述

rpx:等比

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
把局部样式注释掉
在这里插入图片描述
发现全局变量会覆盖
在这里插入图片描述
把局部样式打开：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

uniapp中uni.scss如何引入页面内或生效
m0_47814717的博客
12-25 2588
uniapp中uni.scss不需要引用自动会生效，前提是安装了scss.配置自定义SCSS 变量未生效，错误可能是因为 SCSS 变量未正确加载为全局变量。如果上述方式都不行，且你在uniapp中下载scss插件并安装，建议项目关闭后重新启动即可生效，不需要额外引入和配置。
uniapp使用scss mixin抽离css常用的公共样式
专注
01-09 1162
【代码】uniapp使用scss mixin抽离css常用的公共样式。
uni-app中使用scss的示例代码
12-14
遇到的坑 整个一个下午我都在解决uni-app中使用scss的坑，首先说一下我的问题，在用scss时一直不能使用@mixin，然后百度各种办法调试： 代码写法问题（完全按官网的写法来的不可行）: 官网demo 浏览器问题（换火狐不行）。 语法版本问题（换了写法同样不行）: scss使用mixin不生效，浏览器无法编译出来 插件没有安装上（重装还是不好使）。 把<style type=’css’> 改成了 scss ， 还是不行。 使用scss新语法还时不行 整个一下午实在是弄不出来，没办法的情况下，想着直接用vue的中安装scss的方法来操作一下试试，结果还真可以了。 需要注意的是不能全局
UniApp 全局使用字体教程
最新发布
weixin_47873655的博客
11-08 791
UniApp 全局字体设置指南 在 UniApp 项目中实现全局字体统一： 1️⃣ 将字体文件（如 YouYuan.ttf）放入 /static/fonts/ 目录 2️⃣ 在 App.vue 中通过 @font-face 注册字体 3️⃣ 设置全局样式 font-family: 'YouYuan' 4️⃣ 注意不同平台路径写法差异（H5用/static/，App用@/static/） 5️⃣ 遇到问题可排查路径、文件名或重新打包 6️⃣ 支持单独页面使用或全局应用 ✨ 完成设置后，项目所有页面将统一显示指
uni-app 如何在代码中使用定义的scss变量
BradenHan的专栏
04-25 7034
1. 使用全局SCSS变量定义全局变量在uni-app项目中，通常有一个名为uni.scss的全局样式文件，用于存放项目级的SCSS变量、混合（mixins）、函数等。// 其他变量、混合、函数等...在组件或页面中使用全局变量在Vue单文件组件（SFC）的
uni-app中使用scss
weixin_44003190的博客
05-27 1万+
项目总结—scss篇 1.配置 1.1 vue 1.2 react 1.3 uniapp 2. 引入scss 先将所有scss合并到index.scss中 @import "../base.scss" @import "../form.scss" 在main.js中引入即可 import "../index.scss" 3. 全局配置-global 有两个scss比较特殊，一个是global，...
uniapp-TODO-LIST-个人随手记
03-12
uniapp的优势在于其统一的开发规范和丰富的组件库，大大减少了开发者在多端开发过程中的学习成本和开发时间。 在uniapp-TODO-LIST-个人随手记项目中，主要包含了几个关键的文件和目录，它们共同构成了这个应用的...
uniapp scroll-view解析
qq_36158551的博客
08-02 1227
在使用scroll-view组件实现下拉刷新功能时，需要在scroll-view上绑定refresher-triggered属性，并在data中定义该属性，默认设置为false。在 UniApp 中，@refresherabort 是 scroll-view 组件的一个事件，当用户在下拉刷新过程中取消刷新操作时，会触发 @refresherabort 事件。通常在下拉刷新完成后，需要将refresher-triggered属性设置为false，以隐藏刷新图标并恢复视图状态。
在uniapp、uni-admin中使用阿里巴巴矢量库自定义字体图标
夏夜追凉丶的博客
11-14 740
在uniapp、uni-admin中使用阿里巴巴矢量库自定义字体图标
图鸟UI-uniapp-uniapp资源
03-16
uni.scss文件是针对uni-app框架设计的样式表文件，开发者可以通过它来统一设置应用的样式变量，比如字体大小、颜色主题等，这有助于保持整个应用界面的一致性。 readme.txt和demo.txt文件则提供了该资源包的使用...
修改uniapp自定义导航栏uni-nav-bar标题字体样式
weixin_48929505的博客
04-10 2708
修改uniapp自定义导航栏uni-nav-bar标题字体样式
Uniapp中的uni.scss
兰亭幽梦
07-10 513
uni.scss为uni-app新建项目自带工程文件，使用的预处理器为sass/scss，由此可见，uni-app官方推荐的是scss。uni.scss。
uni-app 全局使用scss
想吃凤梨酥的博客
08-18 1830
uni-app 全局使用scss的方法
uniapp scss 的用法
qq_60056854的博客
04-14 2905
scss的一些基本用法
uniapp中使用scss
yigeboke的博客
02-26 2189
在项目中有几个相同的样式,比如下边的 flex 我们可以把它写成一个变量,通过混合器应用 @mixin标识符定义,下边的这段sass代码 在 uni.scss中增加如下代码: @mixin chenflex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } 然后再页面使用时再需要用到的地方这样写 .title{ width: 100%; ..
在学习uni-app过程中使用的css样式记录
qq_34080064的博客
05-20 2238
​在学习uni-app过程中，记录下使用的css样式，持续更新。
uni-app - 使用scss动态配置宫格布局
iotjin的专栏
07-16 2011
demo 地址: https://github.com/iotjin/jh-uniapp-demo 介绍 uni-app推荐使用scss设置样式 Scss/Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。 使用 Scss/Sass 以及 Scss/Sass 的样式库（如 Compass）有助于更好地.
uni-app项目中使用scss语法
热门推荐
草灯的专栏
02-15 4万+
如何在uni-app项目中使用scss语法。我的win7 64位系统 最简单的方法如下： 点击菜单栏中的“工具 – 插件安装 – scss/sass编译” 点击安装，如果成功了，就可以正常使用了。 很不幸的是，我的提示失败了 然后我又找到D:\HBuilderX\plugins\compile-node-sass插件目录，执行npm install，仍然提示失败： 这里写自定义目录标题欢迎使用...
uni-app如何使用scss和字体图标
weixin_54362381的博客
12-14 590
uni-app如何使用scss和字体图标 一、uni-app使用字体图标 在阿里巴巴矢量图标库中选择字体，加入购物车后，添加至项目，进入我的项目，选择下载至本地。 解压后，将下列四个文件添加至uni-app的static文件夹下。 在根组件中引入iconfont.css 修改iconfont.css文件中其他三个文件的路径。 将字体引入相应文件使用。 效果： 二、uni-app如何使用scss a. 选择工具->插件安装。 b. 前往插件市场。 c. 搜索并使用HBuilderX引入
uniapp uni-steps 怎么能整体变大
04-15
### 调整 `uni-steps` 组件的整体尺寸 在 UniApp 中，`uni-steps` 是一个常用的步骤条组件，用于展示流程状态或进度。要调整其整体尺寸，可以通过自定义 CSS 样式的方式实现。以下是具体的方法： #### 方法一：覆盖默认样式 通过修改 `uni-steps` 的相关类名的样式属性，可以达到放大效果。例如，增加字体大小、图标大小以及间距等。 ```css /* 修改步骤文字的字体大小 */ .uni-steps__column-text { font-size: 18px !important; } /* 修改步骤图标的大小 */ .uni-steps__column-icon { width: 30px !important; height: 30px !important; line-height: 30px !important; font-size: 20px !important; } /* 修改步骤之间的连线粗细 */ .uni-steps__column-line { border-width: 2px !important; } ``` 上述代码片段中的 `!important` 属性确保了自定义样式能够覆盖默认样式[^1]。 #### 方法二：使用 SCSS 变量 如果项目中已经配置了 SCSS 并引入了全局变量文件，则可以直接修改对应的变量值来调整整个项目的 `uni-steps` 尺寸。 假设全局变量文件中有以下内容： ```scss $steps-column-font-size: 14px; $steps-column-icon-size: 24px; $steps-column-line-border-width: 1px; ``` 可以在项目入口处重新定义这些变量： ```scss $steps-column-font-size: 18px; $steps-column-icon-size: 30px; $steps-column-line-border-width: 2px; @import '@/components/uni-scss/index'; ``` 这样做的好处是可以集中管理样式变量，减少重复工作[^1]。 #### 方法三：动态绑定样式 对于某些特定需求，可能需要根据数据动态调整样式。此时可以利用 Vue 的 `style` 或 `class` 动态绑定功能。 示例代码如下： ```vue <template> <view :style="{ fontSize: `${fontSize}px`, '--iconSize': iconSize }"> <uni-steps :options="stepsOptions"></uni-steps> </view> </template> <script> export default { data() { return { stepsOptions: [ { title: '第一步', desc: '' }, { title: '第二步', desc: '' }, { title: '第三步', desc: '' } ], fontSize: 18, iconSize: '30px' }; } }; </script> <style scoped> /* 使用 CSS 自定义属性 */ ::v-deep .uni-steps__column-icon { width: var(--iconSize); height: var(--iconSize); line-height: var(--iconSize); font-size: calc(var(--iconSize) / 1.5); } </style> ``` 此方法允许开发者灵活控制不同场景下的样式变化[^2]。 --- ### 注意事项 - 如果直接修改框架自带的样式文件（如 `lcpapp/uni.css`），可能会导致升级时被覆盖，因此推荐采用覆盖方式或 SCSS 变量方式进行调整。 - 需要注意样式的优先级问题，通常建议使用更高特异性选择器或者添加 `!important` 来强制生效。 --- 问题
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值