vue3 + vite + ts 中使用less文件全局变量

文章目录

    • 安装依赖
    • 新建css变量文件
    • 全局引入css变量文件
    • 使用css变量

一、安装依赖

npm install less less-loader --save-dev

二、新建CSS变量文件

  (1) :在根目录下的src文件中 src-> asset -> css ->glibal.less

// glibal.less :root{--public_background_font_Color  :  red;--publicHouver_background_Color :#fff ;--header_background_Color : #fff ;--menu_background : #fff ;
}

三、全局引入css变量文件

 (1)、在根目录下的vite.config.ts文件夹中添加

export default defineConfig({plugins: [vue(),],//配置css变量css: {preprocessorOptions: {less: {javascriptEnabled: true,},},},
})

(2)在src目录下的mian.ts文件夹中引入自己定义的文件

import './assets/css/global.less';

四、使用css变量

(1)、在user.vue文件中使用

<template><div >user页面</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less">div{width: 100px;height: 100px;background: var(--public_background_font_Color); //自己定义的变量}
</style>

效果:

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

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

相关文章

Dubbo知识点大全

“ 分布式应用场景有高并发,高可扩展和高性能的要求。还涉及到,序列化/反序列化,网络,多线程以及设计模式的问题。幸好 Dubbo 框架将上述知识进行了封装,让程序员能够把注意力放到业务上。 概念和架构 Provider:暴露服务的服务提供方Consumer:调用远程服务消费方Regist…

CUDA编程 - 用向量化访存优化 elementwise 核函数 - 学习记录

Cuda elementwise 一、简介1.1、ElementWise1.2、 float4 - 向量化访存 二、实践2.1、如何使用向量化访存2.2、Cuda elementwise - Add2.3、Cuda elementwise - Sigmoid2.3.1、简单的 Sigmoid 函数2.3.2、ElementWise Sigmoid float4&#xff08;向量化访存&#xff09; 2.4、C…

商家入驻平台怎么让资金自动分配给商家

最近很多上线了多商户电商系统的朋友咨询&#xff0c;我们平台的用户支付后&#xff0c;钱进入了我们的对公账户&#xff0c;怎样让钱在走完流程后&#xff0c;自动进入商家的账户呢&#xff1f;今天商淘云为您分享商户入驻平台自动分配给商家资金的三种方法。 首先是平台应建立…

Docker基础(一)

文章目录 1. 基础概念2. 安装docker3. docker常用命令3.1 帮助命令3.2 镜像命令3.3 容器命令3.4 其他命令 4. 使用案例 1. 基础概念 镜像&#xff08;Image&#xff09;&#xff1a;Docker 镜像&#xff08;Image&#xff09;&#xff0c;就相当于是一个 root 文件系统。比如官…

node14下运行项目报错:regeneratorRuntime is not defined

regeneratorRuntime is not defined&#xff0c;这是由于配置babel出错问题&#xff0c;由于使用了es7语法如async/await而当前babel版本过低 解决&#xff1a; npm install -D babel-plugin-transform-runtime babel-runtime 安装完成后在.babelrc文件下配置&#xff1a; &qu…

vue2与vue3的diff算法有什么区别

在 Vue 中&#xff0c;虚拟 DOM 是一种重要的概念&#xff0c;它通过将真实的 DOM 操作转化为对虚拟 DOM 的操作&#xff0c;从而提高应用的性能。Vue 框架在虚拟 DOM 的更新过程中采用了 Diff 算法&#xff0c;用于比较新旧虚拟节点树&#xff0c;找出需要更新的部分&#xff…

远程连接Redis

以连接阿里云上的Redis为例 1. 在阿里云安全组中开放端口 2.修改Redis启动时所用的配置文件&#xff08;redis.conf&#xff09; 2.1 修改ip地址 如图&#xff1a;将默认的本地ip bind 127.0.0.1地址改为bind 0.0.0.0 2.2 将保护模式关闭 将默认的 supervised yes 改为 n…

Transformer视频理解学习的笔记

今天复习了Transformer,ViT, 学了SwinTransformer, 还有观看了B站视频理解沐神系列串讲视频上&#xff08;24.2.26未看完,明天接着看&#xff09; 这里面更多论文见&#xff1a;https://github.com/mli/paper-reading/ B站视频理解沐神系列串讲视频下&#xff08;明天接着看&a…

QPair和QMap

QPair和QMap是Qt框架中用于不同目的的两种容器类型&#xff0c;它们各自有不同的使用场景和特点。 QPair QPair是一个模板类&#xff0c;用于存储一对值&#xff0c;这对值可以是任意类型。它类似于C标准库中的std::pair。QPair通常用于当函数需要返回两个值时或者需要将两个…

认证模式~

认证方式 基于Cookie和Session的认证方式 基于Cookie和Session的认证是传统的Web应用认证机制。它依赖于HTTP协议无状态的特性&#xff0c;在客户端&#xff08;浏览器&#xff09;和服务器之间保持用户的状态。 工作原理 用户登录&#xff1a;用户通过输入用户名和密码来登…

速盾网络:组建CDN服务器加速

在当前互联网时代&#xff0c;网站的速度对用户体验和搜索引擎排名至关重要。为了提升网站的访问速度和性能&#xff0c;越来越多的网站选择使用CDN&#xff08;内容分发网络&#xff09;服务。本文将介绍如何利用速盾网络来组建CDN服务器&#xff0c;以加速网站访问。 1. 选择…

Spring Boot:全面解析现代微服务构建利器

Spring Boot 是基于 Java 平台的开源框架&#xff0c;它通过提供一系列标准化的快速开发和部署功能&#xff0c;彻底革新了传统 Spring 应用程序的创建与管理方式。自2014年发布以来&#xff0c;Spring Boot 已经成为构建企业级、云原生以及微服务架构应用的首选工具之一&#…

嵌入式C语言(三)

typeof() 使用typeof可以获取一个变量或表达式的类型。 typeof的参数有两种形式&#xff1a;表达式或类型。 int i;typeof(i) j 20; --> int j 20;typeof(int *) a; -->int *a; int f(); -->typeof(f()) k;--? int k我们可以看出通过typeof获取一个变量的…

合并spark structured streaming处理流式数据产生的小文件

备注&#xff1a; By 远方时光原创&#xff0c;可转载&#xff0c;不能复制到其他平台 背景&#xff1a;做流批一体&#xff0c;湖仓一体的大数据架构&#xff0c;常见的做法就是 数据源->spark Streaming->ODS&#xff08;数据湖&#xff09;->spark streaming->…

Vue 实现页面导出A4标准大小的PDF文件,以及处理图片跨域不能正常展示的问题等

效果预览&#xff1a; 代码流程&#xff1a;首先在utils文件夹下创建htmlToPdf的js工具文件&#xff0c;然后在main.js中注册引用 htmlToPdf.js // 导出页面为PDF格式 import html2Canvas from html2canvas import JsPDF from jspdfexport default {install(Vue, options) {V…

hcia datacom课程学习(1):通信基础

1.总体框架 上图为发送方通过互联网传递信息给接收方的过程。 家用路由器会直接集成上图中的四层&#xff08;vlan&#xff0c;DHCP&#xff0c;静态路由&#xff0c;NAT&#xff0c;PPPoE&#xff09;。 2.网络性能指标 &#xff08;1&#xff09;带宽 单位时间内传输的数…

Linux 使用 SSH 传输文件

# 登录 ssh usernameip_address # 复制文件(远程-->本地) scp usernameip_address:/home/username/filename . # 复制文件(本地-->远程) scp filename usernameip_address:/home/username # 复制目录(本地-->远程) scp -r source_dir usernameip_address:/home/use…

独孤思维:这份付出,可以拿一辈子收益

学习&#xff0c;不能贪杯。 做副业&#xff0c;不能什么都做。 什么都学&#xff0c;就什么都学不会。 什么项目都做&#xff0c;就什么都赚不到钱。 这是一定的。 人的精力有限&#xff0c;时间有限&#xff0c;成本有限。 这一辈子&#xff0c;做好一件事就够了。 很…

解析Hadoop三大核心组件:HDFS、MapReduce和YARN

目录 HadoopHadoop的优势 Hadoop的组成HDFS架构设计Yarn架构设计MapReduce架构设计 总结 在大数据时代&#xff0c;Hadoop作为一种开源的分布式计算框架&#xff0c;已经成为处理大规模数据的首选工具。它采用了分布式存储和计算的方式&#xff0c;能够高效地处理海量数据。Had…

Redisson - 实现Java的Redis分布式和可扩展解决方案

Redisson - 实现Java的Redis分布式和可扩展解决方案 引言&#xff1a; 在现代的分布式系统中&#xff0c;缓存和数据存储扮演着至关重要的角色。Redis作为一种高性能的键值存储数据库&#xff0c;被广泛用于缓存、消息队列、实时数据分析等场景。然而&#xff0c;原生的Redis…