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

相关推荐
Hacker_Z&Q14 小时前
CSS 笔记2 (属性)
前端·css·笔记
CappuccinoRose18 小时前
CSS前端布局总指南
前端·css·学习·布局·flex布局·grid布局·float布局
郑州光合科技余经理20 小时前
可独立部署的Java同城O2O系统架构:技术落地
java·开发语言·前端·后端·小程序·系统架构·uni-app
雪芽蓝域zzs20 小时前
uniapp 取消滚动条
uni-app
强子感冒了20 小时前
CSS基础学习:CSS选择器与优先级规则
前端·css·学习
2401_8658548821 小时前
Uniapp和Flutter哪个更适合企业级开发?
flutter·uni-app
雪芽蓝域zzs21 小时前
uniapp 省市区三级联动
前端·javascript·uni-app
总爱写点小BUG21 小时前
UniApp 图标方案终极排坑:告别 FontClass,拥抱真 SVG 组件化
前端框架·uni-app
layman05281 天前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔1 天前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html