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

相关推荐
2501_9151063213 小时前
iOS 抓不到包怎么办?从 HTTPS 代理排查到 TCP 数据流捕获的全链路解决方案
android·tcp/ip·ios·小程序·https·uni-app·iphone
游戏开发爱好者813 小时前
APP上架苹果应用商店经验教训与注意事项
android·ios·小程序·https·uni-app·iphone·webview
WZl13 小时前
在传统的HTML、CSS与JavaScript项目中加入vue
javascript·css·vue.js·html
无·糖13 小时前
大学生HTML期末大作业——HTML+CSS+JavaScript人物明星(周杰伦)
javascript·css·html·课程设计·大学生·大作业·web网页设计作业
济南壹软网络科技有限公司13 小时前
沉浸式体验革命:壹软科技2025新版盲盒源码前端3D渲染与个性化运营技术解析
前端·科技·uni-app·开源·php·盲盒源码
parade岁月14 小时前
理解 CSS backface-visibility:卡片翻转效果背后的属性
前端·css
l***775215 小时前
Vue项目中 安装及使用Sass(scss)
vue.js·sass·scss
Qin_jiangshan15 小时前
flutter和reactNative以及uniapp区别
flutter·react native·uni-app
MrTan16 小时前
Uni-App 鸿蒙应用微信相关功能上架踩坑:自制微信安装检测插件
uni-app·harmonyos
QianhangQianping16 小时前
前端技术迭代深析:从 CSS 布局到状态管理的进化之路
前端·css