uni-app如何使用scss和字体图标

最新推荐文章于 2024-05-20 11:15:42 发布
最新推荐文章于 2024-05-20 11:15:42 发布
阅读量393 收藏
点赞数
分类专栏： uni-app 文章标签： scss css css3 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54362381/article/details/121932356
版权

uni-app如何使用scss和字体图标

一、uni-app使用字体图标

  1. 在阿里巴巴矢量图标库中选择字体，加入购物车后，添加至项目，进入我的项目，选择下载至本地。
  2. 解压后，将下列四个文件添加至uni-app的static文件夹下。
    在这里插入图片描述
  3. 在根组件中引入iconfont.css
    在这里插入图片描述
  4. 修改iconfont.css文件中其他三个文件的路径。
最低0.47元/天 解锁文章
stack君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app 之 安装uView，安装scss/sass编译
jun_tong的博客
09-04 1563
uni-app 之 安装uView，安装scss/sass编译
创建uni-app项目及安装scss插件
ajiang0622的博客
11-09 4307
uni-app在手，做啥都不愁 -什么是uni-app? 一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 一套代码编到13个平台 uni-app官网：https://uniapp.dcloud.io/ uView :https://www.uviewui.com/ -快速上手 1、创建uni-app项目 这里用到的是HBuilderX 点击
uni-app小程序操作--关于使用scss样式的引入和使用
zhaoweiping123的博客
01-06 3541
1.首先要下载插件 https://ext.dcloud.net.cn/plugin?name=compile-node-sass 2.在页面的比如index.vue，样式标签style引入lang=‘scss’, 3.在下面的样式里，则可以使用scss定义的变量
在学习uni-app过程中使用的css样式记录
最新发布
qq_34080064的博客
05-20 1171
​在学习uni-app过程中，记录下使用的css样式，持续更新。
uniapp安装sass依赖问题
weixin_44034821的博客
03-19 3885
uniapp安装sass出现的问题一. 安装node-sass、sass-loader出错编译失败*若编译还是出错，可能是node-sass和sass-loader版本太高，建议换成以下版本：* 一. 安装node-sass、sass-loader出错 首先安装node-sass，因为sass-loader依赖于它 npm install node-sass --save-dev 安装sass-loader npm install sass-loader --save-dev 修改style
vue之安装sass艰辛踩坑（uni-app+uview-ui项目）
dogmiaomiao的博客
04-01 1857
我安装过程中才知道的事情： 我安装sass，npm是v6.14.13版本 ，node是v14.17.0版本，sass是v4.14.1版本，才得已成功！ 之前我node是v16的版本，死活安装报错，不知道原因 HbuildX编辑器内部的node-sass插件只支持到node v12的版本， vscode内部插件应该可以支持更高版本的node以及最新版本的sass，没试过，不知道。 但是sass已经不做停止做市场更新和维护了 ======================================
uniapp(一)
m0_74331185的博客
02-03 5922
微信小程序简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
很好用的uni-app节点树组件！
06-23
5. **uni.scss**：可能是uni-app的全局样式文件，使用SCSS预处理器语言来编写CSS。 6. **App.vue**：uni-app的主组件，包含了应用的根Vue实例。 7. **static**：通常存放静态资源，如图片、字体等。 8. **pages**：...
基于uni-app和colorUI开发H5初始模板
12-22
colorUI则是一款专门为移动App设计的轻量级UI库，它提供了多种预设的样式和组件，如按钮、图标、布局、表格等，遵循简洁、一致的设计原则，使应用界面看起来更加专业且易于使用。colorUI的使用可以让开发者快速实现...
uni-app仿糗事百科前端
04-08
【uni-app仿糗事百科前端】项目是一个使用uni-app框架构建的移动端应用，旨在模仿知名的“糗事百科”网站的前端界面和功能。uni-app是一个多端开发框架，允许开发者用一套代码同时发布到iOS、Android、Web（H5、微信...
uni-app 访亚马逊日本手机版app模板.rar
01-20
uni.scss是uni-app的全局样式文件，使用SCSS（Sass的语法扩展）编写，可以进行变量、混合、嵌套等高级CSS操作，方便维护和管理项目中的样式规则。 【App.vue】 App.vue是uni-app应用的主组件，它定义了应用的根组件...
uin-app仿瑞幸咖啡app5个初始页面
03-29
- **UI设计**：使用uni-app的内置组件（如`<view>`、`<button>`等）和自定义组件结合，配合uni.scss进行样式定制，以达到瑞幸咖啡APP的视觉效果。 - **网络请求**：uni-app提供了`uni.request`方法用于处理网络...
uni-app 使用Sass
热爱编程的男孩子
04-08 678
1.工具=》插件安装=》安装新插件=》前往插件市场安装 点击下载，然后安装即可。 <template> <view class="content box"> <image class="logo" src="/static/logo.png"></image> <view class="text-area"> <text class="title">{{title}}</text> </view&
uniapp中样式的学习及如何使用scss和字体图标
yasinawolaopo的博客
12-21 1269
uniapp中样式的学习及如何使用scss和字体图标
uni-app全局引入scss文件的不同方式
热门推荐
Moon Star
11-01 1万+
1. 使用config方式引入 在项目下创建vue.config.js文件 module.exports = { css: { loaderOptions: { scss: { prependData: `@import "~@/static/style/index.scss";` } } } } Tips：根据scss版本确定配置，版本低的使用“data”，高的使用“prependData” 在/static/style/index.scss文件中，引入其他
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，...
uni-app之样式 scss 和 字体图标
weixin_43845137的博客
04-05 1223
目录uni-app之样式 scss 和 字体图标uni-app之样式 rpx导入外联样式表base.cssdetail.vueuni-app之 字体图标下载字体图标把对应的字体库copy到 static文件下 font文件目录在App之中使用，加载全局使用 字体图标uni-app使用 scss等 uni-app之样式 scss 和 字体图标 注意点：uni-app之中选择器，有id，class，标签等，但是没有 * 选择器 page标签就类似 body uni-app之样式 rpx rpx 即响应式
uni-app插件开发——使用scss
辣辣的草莓酱
03-23 1914
uni-app插件开发指南实名认证安装sass安装Ruby使用ruby安装sass和compass开发插件 实名认证 这个按照DCloud网站的要求完后即可。 安装sass sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby，[安装sass中文网]查看详细安装步骤。(https://www.sass.hk/install/)（注:mac下自带Ruby无需在安装Ruby!） 安装R...
uniapp使用sass文件自定义sass变量
weixin_55410216的博客
06-20 919
解决办法就是，改个地方，在uniapp的uni.scss文件中引入。这样子所有vue文件就都能使用自定义的变量了。会发现在其他的vue文件中找不到自定义的变量会报错！在uniapp的app.vue中引入自定义的scss的变量。
uni-app项目中floor-mobile.scss文件作用
05-19
floor-mobile.scss 文件是 Uni-app 中的一个样式文件，是用来定义 Floor UI 组件库的样式的。Floor UI 是一个基于 Vue.js 的移动端 UI 组件库，包含了一些常用的组件，如按钮、表单、列表等。该组件库的设计风格简洁...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值