【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录

一、@import导入css样式

在项目文件中创建一个common文件夹,下面创建一个css文件夹,里面放上style.css文件,编写的是公共样式,我们现在要在App.vue中引入该样式。

在App.vue中引入该样式,这样就会使样式全局生效:

二、scss变量的用法

打开uni.scss,里面定义了许多变量,我们可以使用。

如:我们使用$uni-color-primary这个颜色变量

如果我们想要自己定义一些变量,就可以以$开头去定义变量:

当然,我们也可以使用导入的方法导入外部的scss文件:

在项目文件中创建一个common文件夹,下面创建一个scss文件夹,里面放上style.scss文件,编写的样式变量:

使用同样的方法导入到uni.scss文件中:

相关推荐
初遇你时动了情6 小时前
uniapp vue3 ts自定义底部 tabbar菜单
前端·javascript·uni-app
韩沛晓10 小时前
uniapp跨域怎么解决
前端·javascript·uni-app
咸虾米13 小时前
微信小程序服务端api签名,安全鉴权模式介绍,通过封装方法实现请求内容加密与签名
vue.js·微信小程序·uni-app
狂炫一碗大米饭13 小时前
每个前端开发人员都应该知道的 6 大 CSS 框架
css·scss
Ratten14 小时前
使用 uniapp 实现的扫雷游戏
uni-app
YuShiYue14 小时前
【uni-app】自定义导航栏以及状态栏,胶囊按钮位置信息的获取
uni-app·notepad++
2501_9159214315 小时前
iOS 应用上架多环境实战,Windows、Linux 与 Mac 的不同路径
android·ios·小程序·https·uni-app·iphone·webview
yede17 小时前
uniapp - 自定义页面的tabBar
vue.js·uni-app
惜分飞18 小时前
ORA-600 kcratr_nab_less_than_odr和ORA-600 2662故障处理---惜分飞
前端·css·less
谢泽豪19 小时前
解决 uniapp 修改index.html文件不生效的问题
前端·uni-app