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

相关推荐
疯狂的魔鬼19 小时前
精确计算容器剩余视口高度:useAutoContainerFullHeight 的工程实践
前端·css·typescript
用户0595401744619 小时前
用了 3 个月 ChatGPT,才发现它一直在遗忘——用 Playwright 自动化验证记忆存储一致性
前端·css
spmcor20 小时前
CSS 黏性定位完全指南:从入门到精通
css
用户0595401744620 小时前
用了半年 LangChain Memory,才发现回滚测试压根没测对
前端·css
天丁o21 小时前
Spring Boot + uni-app 智慧考勤闭环 Demo:打卡记录、异常状态和日统计如何复用到企业系统
spring boot·uni-app·mybatis plus·企业管理系统·考勤系统
这是个栗子21 小时前
uni-app 微信小程序开发:常用事件指令(@xxx)(一)
微信小程序·小程序·uni-app
丨我是张先生丨2 天前
日语单词 Web Page
前端·css·css3
吃西瓜不吐籽_2 天前
2026 届前端校招冲刺:2 万字高频面试题库(含详解、追问与评分标准)
前端·javascript·css·typescript·前端框架·es6
Csvn3 天前
CSS :has() 选择器实战:没有它之前我们写了多少冗余 JS
前端·css
用户059540174464 天前
大模型长上下文遗忘排查实录:用 Playwright 自动化测试,揪出了 90% 的存储序列化 bug
前端·css