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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/3217.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大模型WebUI:Gradio全解11——Chatbot:融合大模型的多模态聊天机器人(6)

大模型WebUI:Gradio全解11——Chatbot:融合大模型的多模态聊天机器人(6) 前言本篇摘要11. Chatbot:融合大模型的多模态聊天机器人11.6 为LLM Agent构建UI11.5.1 使用代理构建1. 使用transformers.agents的实际示例2. 使…

【React】插槽渲染机制

目录 通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽 在 React 中,并没有直接类似于 Vue 中的“插槽”机制(slot)。但是,React 可以通过 props和 children 来实现类似插槽的功能…

LoadBalancer负载均衡服务调用

LoadBalancer LoadBalancer(负载均衡器)是Spring Cloud中的一个关键组件,用于在微服务架构中实现服务请求的负载均衡。它的主要作用是将客户端的请求分发到多个服务实例上,以提高系统的可用性、性能和容错能力。通过LoadBalancer&…

Linux操作命令之云计算基础命令

一、图形化界面/文本模式 ctrlaltF2-6 图形切换到文本 ctrlalt 鼠标跳出虚拟机 ctrlaltF1 文本切换到图形 shift ctrl "" 扩大 ctrl "-" 缩小 shift ctrl "n" 新终端 shift ctrl "t" 新标签 alt 1,…

简历_使用优化的Redis自增ID策略生成分布式环境下全局唯一ID,用于用户上传数据的命名以及多种ID的生成

系列博客目录 文章目录 系列博客目录WhyRedis自增ID策略 Why 我们需要设置全局唯一ID。原因:当用户抢购时,就会生成订单并保存到tb_voucher_order这张表中,而订单表如果使用数据库自增ID就存在一些问题。 问题:id的规律性太明显、…

企业邮箱iRedMail搭建

用自己的域名作为邮箱的后缀,好看、有面子!只要域名不过期,那么,你的邮箱就永远存在! 邮件系统很多,宝塔自带的邮局更是简单,但是若想邮箱可靠(丢邮件、发送邮件进入对方垃圾箱等&a…

在 Fluent 网格划分中使用薄网格特征

薄体模型的网格划分策略 薄体网格划分对于有效模拟薄壁结构或厚度明显小于其他尺寸的几何形状非常有利。当使用此类几何结构时,传统的体积网格划分技术可能会导致单元数量增加,因为它们试图捕获具有许多不必要单元的薄尺寸。薄体网格划分通过专门沿薄方…

Windows重装后NI板卡LabVIEW恢复正常

在重新安装Windows系统后,NI(National Instruments)板卡能够恢复正常工作,通常是由于操作系统的重新配置解决了之前存在的硬件驱动、兼容性或配置问题。操作系统重装后,系统重新加载驱动程序、清理了潜在的冲突或损坏的…

Html5 video标签学习

<video> 标签的属性 autoplay布尔属性声明该属性后&#xff0c;视频会尽快自动开始播放&#xff0c;不会停下来等待数据全部加载完成。controls布尔属性如果存在该属性&#xff0c;浏览器会在视频底部提供一个控制面板&#xff0c;允许用户控制视频的播放。controlslist…

OpenAI推出首个AI Agent!日常事项自动化处理!

2025 年1月15日&#xff0c;OpenAI 正式宣布推出一项名为Tasks的测试版功能 。 该功能可以根据你的需求内容和时间实现自动化处理。比方说&#xff0c;你可以设置每天早晨 7 点获取天气预报&#xff0c;或定时提醒遛狗等日常事项。 看到这里&#xff0c;有没有一种熟悉的感觉&a…

【Linux】Socket编程-TCP构建自己的C++服务器

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 一&#xff1a;&#x1f525; Socket 编程 TCP &#x1f98b; TCP socket API 详解&#x1f98b; 多线程远程命令执行&#x1f98b; 网络版计算器&#xff08;应用层自定义协议与序列化…

web开发工具之:三、JWT的理论知识,java的支持,封装的工具类可以直接使用

文章目录 前言一、JWT的理论知识1. 什么是 JWT&#xff08;JSON Web Token&#xff09;&#xff1f;2. **JWT 的组成**3. **JWT 的特点**4. **JWT 的使用场景**5. **JWT 的生命周期**6. **JWT 的优点**7. **JWT 的注意事项**5. **JWT 示例**总结 二、java的springboot支持1. po…

Jira中bug的流转流程

Jira中bug的状态 1. 处理Bug的流程2. bug状态流转详述bug的状态通常包括 1. 处理Bug的流程 2. bug状态流转详述 bug的状态通常包括 未解决 1. 测试人员创建一个bug&#xff0c;填写bug的详细信息&#xff0c;如概要、bug级别、复现步骤、现状、预期结果等 2. 定位bug&#x…

ChatGPT结合Excel辅助学术数据分析详细步骤分享!

目录 一.Excel在学术论文中的作用✔ 二.Excel的提示词✔ 三. 编写 Excel 命令 四. 编写宏 五. 执行复杂的任务 六. 将 ChatGPT 变成有用的 Excel 助手 一.Excel在学术论文中的作用✔ Excel作为一种广泛使用的电子表格软件&#xff0c;在学术论文中可以发挥多种重要作用&a…

Vue篇-07

Vue UI组件库 一、移动端常用的UI组件库 1.1、Vant 1.2、Cube UI 1.3、Mint UI 二、PC端常用的UI组件库 2.1、Element UI Element - The worlds most popular Vue UI framework 安装&#xff1a; 按需引入&#xff1a; 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…

LabVIEW实现油浸式变压器自主监测与实时报告

油浸式变压器广泛应用于电力系统中&#xff0c;尤其是在电力传输和分配领域。为了确保变压器的安全、稳定运行&#xff0c;及时监测其工作状态至关重要。传统的变压器监测方法通常依赖人工巡检和定期检查&#xff0c;但这不能及时发现潜在的故障隐患&#xff0c;且效率较低。随…

测试工程师的linux 命令学习(持续更新中)

1.ls """1.ls""" ls -l 除文件名称外&#xff0c;亦将文件型态、权限、拥有者、文件大小等资讯详细列出 ls -l等同于 ll第一列共10位&#xff0c;第1位表示文档类型&#xff0c;d表示目录&#xff0c;-表示普通文件&#xff0c;l表示链接文件。…

如何使用Ultralytics训练自己的yolo5 yolo8 yolo10 yolo11等目标检测模型

Ultralytics正在以惊人的速度吸收优秀的CV算法&#xff0c;之前Ultralytics定位于YOLOV8&#xff0c;但逐渐地扩展到支持其他版本的YOLO&#xff0c;最新版本的ultralytics全面支持yolo5 yolo7 yolo8 yolo9 yolo10 yolo11&#xff0c;包含模型的训练、验证、预测、部署等。毫无…

使用 Java 实现基于 DFA 算法的敏感词检测

使用 Java 实现基于 DFA 算法的敏感词检测 1. 引言 敏感词检测在内容审核、信息过滤等领域有着广泛的应用。本文将介绍如何使用 DFA&#xff08;Deterministic Finite Automaton&#xff0c;确定有限状态自动机&#xff09; 算法&#xff0c;在 Java 中实现高效的敏感词检测。…

Digital Document System (DDS)

Digital Document System (DDS&#xff09; 数字档案平台 信息注入