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

相关推荐
超级土豆粉3 小时前
CSS3 的特性
前端·css·css3
Angindem4 小时前
从零搭建uniapp项目
前端·vue.js·uni-app
超级土豆粉8 小时前
CSS 预处理器与工具
前端·css
Bug从此不上门9 小时前
【无标题】
前端·javascript·uni-app·vue
耶啵奶膘11 小时前
uniapp+vue2解构赋值和直接赋值的优缺点
uni-app
BillKu12 小时前
scss(sass)中 & 的使用说明
前端·sass·scss
疯狂的沙粒12 小时前
uni-app 项目支持 vue 3.0 详解及版本升级方案?
前端·vue.js·uni-app
Jiaberrr12 小时前
uniapp Vue2 获取电量的独家方法:绕过官方插件限制
前端·javascript·uni-app·plus·电量
^Rocky13 小时前
uniapp 对接腾讯云IM群公告功能
uni-app·腾讯云
段旭涛14 小时前
uniapp 设置手机不息屏
前端·uni-app