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

相关推荐
CCChaya-软件技术教师1 小时前
24-栅格布局详解(CSS3)
前端·css·css3
橙序研工坊2 小时前
JavaWeb-01-前端Web开发(HTML+CSS)
java·前端·css·html·javaweb
碳烤小咸鱼2 小时前
蓝桥杯 Web 方向入门指南:从基础到实战
前端·javascript·css·蓝桥杯
四季常青树3 小时前
Vue如何利用Postman和Axios制作小米商城购物车
前端·javascript·css·vue.js·前端框架·html
爱编程的鱼4 小时前
Joomla 常用模块 - 在线用户与Joomla 常用模块 - 自定义HTML模块
前端·css·html·joomla
人间小趴菜4 小时前
CSS高度坍塌?如何解决?
前端·css
前端(从入门到入土)13 小时前
uniapp加载json动画
uni-app·json
peachSoda718 小时前
uniapp小程序生成海报/图片并保存分享
小程序·uni-app
yanessa_yu19 小时前
CSS 实战笔记:记录我的成长与收获
前端·css
WEI_Gaot19 小时前
CSS Grid布局(Grid Layout) 4
前端·css