uniapp使用sass文件自定义sass变量

已于 2023-10-03 20:27:46 修改
阅读量950 收藏
点赞数
文章标签： uni-app sass 前端
于 2023-06-20 16:17:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55410216/article/details/131309476
版权

在uniapp的app.vue中引入自定义的scss的变量。

会发现在其他的vue文件中找不到自定义的变量会报错！就是以下这种！

 解决办法就是，改个地方，在uniapp的uni.scss文件中引入。这样子所有vue文件就都能使用自定义的变量了

 下面为uni.scss的位置

晨曦微露，一时美梦无两
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app使用sass历程
qq_39131699的博客
04-07 1593
本文只是记录个人使用sass遇到的一些问题！！！！并非使用教程！！！！最后我也成功了就是。 安装sass npm install sass-loader --save-dev 运行报错： Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 原因： sass版本太高 解决办法： npm uninstall sass-loader npm install sass-loader@8.0.0 --save-dev 运行报
使用uniApp+vue3+Vite4+pinia+sass技术栈构建微信小程序
你离优秀差多少
01-25 1427
使用uniApp的cli模式安装，可以使用vscode开发。不用再单独去下载HBuilderX.
【uni-app】JS动态修改scss样式变量
ChenLingZhi1115的博客
06-06 1244
而是由于z-paging定位导致会覆盖或高度不适配当前navbar，所以设置88px。2、 当H5嵌入到H5时，类似于使用手机浏览器打开的页面，就不需要固定距离手机自带的头部高度。因此需要根据环境动态修改scss定义的变量。所以需要根据嵌入的环境进行判断并动态控制样式。
uniapp 实现更换主题皮肤
06-24
在uniAPP中，我们可以利用SCSS（Sass）预处理器的强大功能来管理和切换主题。 1. **创建主题变量文件**： 在`uni.scss`文件中，定义一组与主题相关的变量，如颜色、字体大小等。例如： ```scss $primary-color:...
uniapp精美ui模板
05-27
此外，uniapp精美ui模板还可能包含了CSS预处理器如Less或Sass，它们扩展了CSS的功能，使样式编写更加灵活和模块化。通过预处理器，开发者可以定义变量、混合（mixins）、嵌套规则等，提高代码的可读性和可维护性。 ...
uniapp图片上传
05-11
- `uni.scss`：uniAPP的全局样式文件，使用Sass预处理器编写，可以设置全局样式变量。 - `App.vue`：应用的主组件，定义整个应用的结构和样式。 - `components`：存放自定义组件的目录，可以复用并封装特定功能。...
心-uniapp
02-25
项目使用了SCSS（Sass）作为CSS预处理器，SCSS是Sass的最新语法，它扩展了CSS，引入了变量、嵌套规则、混合、函数等强大特性，使得CSS编写更加模块化，易于维护和复用。通过SCSS，开发者可以编写更整洁、结构化的...
PUIForUni-scroll_1.0.1_example_legjg2_uniapp_ui_源码
10-04
【uni.scss】可能是uniapp的全局样式表，使用Sass预处理器语言编写，用于定义应用的全局CSS变量、混合、函数等，以便在整个项目中保持一致的样式。 【main.js】是uniapp项目的入口文件，通常用于初始化Vue实例，...
2024最新Uniapp的H5网页版添加谷歌授权验证
松之宅
07-24 557
现在教程不少，但是自从谷歌升级验证之后，以前的老教程就失效了，现在写一个新教程以备不时之需。clientID的申请方式我就不再进行赘述了，其他的教程上面都有，我这边只提供最重要的东西。由于众所周知的特殊原因，开发的时候一定注意网络环境，如果没有梯子是无法进行开发的哦~1、要在html文件中导入谷歌的js文件。你需要将他放到你代码中合适的位置。5、以下代码放到onReady中。3、复制以下代码放在合适的位置。2、将html设置为模板。4、调用谷歌验证的代码。注意：没有梯子不显示。
uni-app声生命周期
蚂蚁搬家
07-25 397
tabbar的页面展示过一次后就保留在内存中，再次切换tabbar页面，只会触发每个页面的onShow，不会再触发onLoad.onLoad:监听页面加载，其参数为上个页面传递的数据，参数类型为Object，只加载一次。onShow:监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。onLaunch:当uni-app初始化完成时触发（全局触发一次）onShow:当uni-app启动，或从后台进入前台时显示。onReady:监听页面初次渲染完成，只加载一次。
uni-app基本的数据绑定v-bind,v-for,v-on:click
蚂蚁搬家
07-25 320
数据绑定事件
uniapp+vue微信小程序项目中实现手机号授权登录
郭宝的博客
07-22 524
一般拿到code、encryptedData、iv数据以后，会将该数据传给后台，后台验证后会返回当前用户信息。
uniapp引入自定义图标
weixin_52102740的博客
07-24 395
uniapp自定义图标
uniapp手写滚动选择器
肥晨开发的学习之路
07-25 655
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。没有符合项目要求的选择器 就手写了一个。
用uniapp 及socket.io做一个简单聊天app1
hzether的博客
07-24 619
用户A发送一条私聊消息给用户B，在Messages表中插入一条记录，type为private。用户B接受邀请，将状态更新为accepted，并在GroupMembers表中插入一条记录。用户A在群组中发送一条消息，在Messages表中插入一条记录，type为group。用户A向用户B发送好友请求，在Friends表中插入一条记录，状态为pending。用户A邀请用户B加入群组，在Invites表中插入一条记录，状态为pending。用户A将用户B拉黑，在Blacklists表中插入一条记录。
uniapp中@click或者@tap多层嵌套的问题解决方法
知码客
07-25 543
我们在开发页面的过程中。例如要设计一个九宫格的相册，并且加上删除上传图片和点击图片后预览图片大图的功能例如下图的演示功能。通过上面我们可以看到我们涉及到了两个点击的操作调用了不同的方法，就会遇到一个问题就是点击外围。号后要删除掉当前的图片，那么我们设计的时候如果我们代码写成如下的格式。这个仅仅是我自己的一个笔记整体九宫格实现的代码后续整理再发布。是不生效的，那么我们处理的方式很简单。点击图片后显示大图预览图片，点击。
uni-app全局文件与常用API
2301_80735340的博客
07-25 1192
超时时间，单位为ms。也就是说，在拿到设计稿后，要把稿件宽度等比缩放为750，再测量各区域的大小。下拉刷新操作，需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。这段代码中我们开始了输入框，在输入框中输入内容，点击确定后，可以回调输入的内容，拿到后我们可以做些输入判断、校验之类的操作。打开后，里面有很多内置的样式变量，可以直接拿来用的，现在拿个文字颜色过来试试，注意只需要取"$“至”:" 前的内容即可。
vue2老项目中node-sass更换dart-sass
csl125的博客
07-25 339
安装dart-sas sass-loader 推荐安装sass@1.26.2 sass-loader@7.3.1。更换原因：node-sass经常会出现node版本问题，就很麻烦。卸载项目中的node-sass sass-loader。如果使用了stylelint，需要修改配置规则。然后需要全局替换一下/deep/，全局搜索。从新配置vue.config.js。
【分享】前端程序员-技术网站推荐
最新发布
一位前行者的博客
07-30 387
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
uniapp的sass不兼容
05-09
Uniapp是一个跨平台的开发框架，支持使用Sass预处理器进行样式编写。如果您在使用Sass时遇到了兼容性问题，可能是由于您使用的Sass版本过低或过高导致的。建议您使用与Uniapp官方推荐版本兼容的Sass版本。 另外，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值