【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文件中:

相关推荐
一半醒1 小时前
学习小记1:移动端css适配相关问题
css
2501_915918412 小时前
除了 Perfdog,如何在 Windows 环境中完成 iOS App 的性能测试工作
android·ios·小程序·https·uni-app·iphone·webview
丢,捞仔3 小时前
uni-app上架应用添加权限提示框
前端·javascript·uni-app
雪芽蓝域zzs4 小时前
uniapp富文本rich-text
uni-app
康一夏4 小时前
CSS盒模型(Box Model) 原理
前端·css
炫饭第一名5 小时前
Lottie-web 源码解析(一):从 JSON Schema 认识 Lottie 动画的本质📒
前端·javascript·css
Qlittleboy6 小时前
uniAPP报错:v-for 暂不支持循环数据: (env: Windows,mp,1.06.2307260; lib: 3.12.0)
uni-app
曾帅1686 小时前
uniapp安卓启动图
android·opencv·uni-app
m0_740859626 小时前
解决uniapp折叠面板报错this.collapse.onChange is not a function
uni-app
天府之绝6 小时前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app