【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录

devtools/2025/1/15 3:08:24/

一、@import导入css样式

在项目文件中创建一个common文件夹,下面创建一个css文件夹,里面放上style.css文件,编写的是公共样式,我们现在要在App.vue中引入该样式。

在App.vue中引入该样式,这样就会使样式全局生效:

 二、scss变量的用法

打开uni.scss,里面定义了许多变量,我们可以使用。

如:我们使用$uni-color-primary这个颜色变量 

 

 

如果我们想要自己定义一些变量,就可以以$开头去定义变量:

当然,我们也可以使用导入的方法导入外部的scss文件:

在项目文件中创建一个common文件夹,下面创建一个scss文件夹,里面放上style.scss文件,编写的样式变量:

 

使用同样的方法导入到uni.scss文件中:

 


http://www.ppmy.cn/devtools/150563.html

相关文章

Git学习记录

针对各个项目的gitignore文件示例 github/gitignore: A collection of useful .gitignore templates 忽略文件 文件 .gitignore 的格式规范如下: • 所有空行或者以 # 开头的行都会被 Git 忽略。 • 可以使用标准的 glob 模式匹配。 • 匹配模式…

java项目启动时,执行某方法

1. J2EE项目 在Servlet类中重写init()方法,这个方法会在Servlet实例化时调用,即项目启动时调用。 import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;public class MyServlet extends HttpServlet {Overridepublic void …

window.print()预览时表格显示不全

问题描述:使用element的table组件,表格列宽为自适应,但使用window.print()方法预览的页面会直接按预览宽度截取表格内容进行展示,造成表格可能的显示不全问题 解决方法:添加如下样式 media print {::v-deep {// 表头…

CSS语言的数据类型

CSS语言的数据类型详解 引言 CSS(层叠样式表)是一种用来描述HTML文档外观的样式表语言。尽管CSS主要用于视觉呈现,而不是数据处理,但它仍然包含了一定的数据类型,这些数据类型是决定样式和布局的重要因素。掌握这些数…

ES 的倒排索引

目录 什么是 elasticSearch。 什么是倒排索引 Term Index 是什么 Stored Fields 是什么 Doc Values 是什么 segment lucene 是什么 高性能 高扩展性 高可用 Node 角色分化 去中心化 ES 是什么? ES 和 Kafka 的架构差异 ES 的写入流程 ES 的搜索流程 查询阶段…

ANSYS Fluent学习笔记(三)SCDM基础建模

SCDM的GUI界面图如下: 这个是选择一个面来作为基准面 这是表示让基准面 首先是在设计里面一般是草图编辑进行使用的: 编辑可以拉伸,也可以基于一个轴进行旋转. 拉伸效果图 旋转效果图: 然后SCDM有三种模式:分别是草图…

Java Web开发进阶——WebSocket与实时通信

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,广泛应用于需要实时数据交换的应用程序中。它能够实现服务器与客户端之间的双向通信,避免了传统 HTTP 请求/响应的延迟。结合 Spring Boot,开发实时通信应用变得更加高效与简便。 1. …

GitCode G-Star 光引计划终审前十名获奖项目公示

在技术的浩瀚星空中,GitCode 平台上的 G-Star 项目熠熠生辉。如今,“光引计划” 已圆满落幕,众多 G-Star 项目作者,一同分享项目在 GitCode 平台托管的宝贵体验,并深入挖掘平台的多样玩法。 众多投稿纷至沓来&#xf…