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

相关推荐
Mr Xu_1 小时前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
Lee川3 小时前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
2501_916008898 小时前
深入解析iOS机审4.3原理与混淆实战方法
android·java·开发语言·ios·小程序·uni-app·iphone
哈里谢顿9 小时前
CSS 入门完全指南:从零构建你的第一个样式表
css
. . . . .9 小时前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
QT.qtqtqtqtqt9 小时前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
喵喵虫19 小时前
uniapp修改封装组件失败 styleIsolation
uni-app
RFCEO1 天前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)
EHagSJVNpTY1 天前
基于樽海鞘算法(SSA)的极限学习机(ELM)回归预测对比:BP、GRNN、ELM与SSA - ELM
scss
游戏开发爱好者81 天前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview