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

相关推荐
资深前端之路11 分钟前
vue运用uniapp框架开发企业微信小程序中常用的一些基础方法
uni-app
布兰妮甜5 小时前
px、em 和 rem 的区别:深入理解 CSS 中的单位
前端·css·px-em-rem·布局技巧·css单位
互联网-小阿宇10 小时前
【HTML+CSS+JS+VUE】web前端教程-31-css3新特性
前端·javascript·css
oil欧哟10 小时前
uniapp 小程序 textarea 层级穿透,聚焦光标位置错误怎么办?
vue.js·小程序·uni-app·uniapp
放逐者-保持本心,方可放逐17 小时前
css 布局及动画应用(flex+transform+transition+animation)
前端·css·transform·animation·flex·transition·transgorm
PieroPc17 小时前
特制一个自己的UI库,只用CSS、图标、emoji图 第二版
前端·css·ui
PieroPc17 小时前
两个关于 li bottom 的CSS 问题 笔记
前端·css·笔记
顽疲19 小时前
springboot vue uniapp 仿小红书 1:1 还原 (含源码演示)
vue.js·spring boot·uni-app
林涧泣20 小时前
【Uniapp-Vue3】pages.json页面路由globalStyle的属性
uni-app