vue+less+style-resources-loader 配置全局颜色变量

news2025/1/20 18:29:40

全局统一样式后,可配置vue.config.js实现全局颜色变量,方便在编写时使用统一风格的色彩

一、新建global.less

在这里插入图片描述

二、下载安装style-resources-loader

npm i style-resources-loader --save-dev

三、在vue.config.js中进行配置

module.exports = {
	 pluginOptions: {
	    'style-resources-loader': {
	      preProcessor: 'less',
	      patterns: [resolve('src/assets/css/global.less')]
	    }
	  },
}

四、在vue文件中使用

<style lang="less">
.test{
    color:@theme-color;
}
</style>

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

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

相关文章

架构图是什么,该怎么制作?

架构图是指可视化展示软件、系统、应用程序、网络等各种体系结构的一类图表或图形&#xff0c;它能够形象地展示体系结构中各个组成部分和它们之间的关系。 架构图的类型 架构图的种类比较多&#xff0c;逐一列举不太合适&#xff0c;这里只列举一些常见的架构图类型&#…

爬虫-基于python的旅游景点推荐系统的设计与实现-计算机毕业设计源码24044

摘 要 21世纪时信息化的时代&#xff0c;几乎任何一个行业都离不开计算机&#xff0c;将计算机运用于旅游景点管理也是十分常见的。过去使用手工的管理方式对旅游景点进行管理&#xff0c;造成了管理繁琐、难以维护等问题&#xff0c;如今使用计算机对旅游景点的各项基本信息进…

2021年2月16日 Go生态洞察:Go 1.16版本发布

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

CentOS 7 部署 Nacos (单机版)

CentOS 7 部署 Nacos &#xff08;单机版&#xff09; 1. 下载 Nacos 安装包 历史版本&#xff1a;https://github.com/alibaba/nacos/releases/ 我选的是 2.1.0 版本&#xff0c;https://github.com/alibaba/nacos/releases/download/2.1.0/nacos-server-2.1.0.tar.gz 2. …

2021年09月 Scratch图形化(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 程序中要使用不确定的数值,这时要用到的是?( ) A、图章 B、变量 C、广播 D、随机数 答案:D 第2题 执行下列程序后,角色会说?( ) A、3 B、6 C、10 D、15 答案:D 第3题…

现货白银怎样数点数?

由于数十倍资金杠杆的存在&#xff0c;现货白银投资者可以把很细微的行情波动&#xff0c;转化为相对显著的收益。但另一方面&#xff0c;现货白银交易过程中会难免会涉及一定的点差成本&#xff0c;所以投资者在入市之前&#xff0c;一定要清晰地知道自己需要能够拿下多少的行…

onlyoffice文件大小超出了服务器设置处理

onlyoffice文件大小超出了服务器设置处理 1.前言2. onlyoffice服务安装2.1 docker安装命令2.2 访问测试 3. 修改服务器文件大小限制方案3.1 旧方案-7.2版本不可行3.1.1 进入 OnlyOffice Document Server 容器3.1.2 编辑配置文件3.1.3 找到并修改文件大小限制3.1.4 保存并退出编…

封装一些可能会用到的JS的Dom操作方法(非JS自带的方法)

1. 父元素节点下的子元素节点逆序 HTMLElement.prototype.childRevers function () {var all_num this.childElementCount;if (all_num) {while(all_num--){this.appendChild(this.children[all_num]);}} } // 获取 ul 父节点对象 var oul document.getElementsByTagName(u…

python获取系统当前进程数和最大进程数

参考&#xff1a; https://blog.51cto.com/u_16213345/7115864 https://www.baidu.com/s?wdpython%20%E8%8E%B7%E5%8F%96%E7%B3%BB%E7%BB%9F%E5%BD%93%E5%89%8D%E8%BF%9B%E7%A8%8B%E6%95%B0%E5%92%8C%E6%9C%80%E5%A4%A7%E8%BF%9B%E7%A8%8B%E6%95%B0&rsv_spt1&rsv_iqid…

基于YOLOv8深度学习的PCB板缺陷检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能AI、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推荐--…

M1安装RabbitMQ

1.查看centos内核版本 uname -a uname -r2.安装之前的准备工作 安装RabbitMQ必装Erlang(RabbitMQ官网添加链接描述) 2.1.Erlang简介 Erlang是一种通用的面向并发的编程语言&#xff0c;它由瑞典电信设备制造商爱立信所辖的CS-Lab开发&#xff0c;目的是创造一种可以应对…

Java高级技术(动态代理)

一&#xff0c;代理 二&#xff0c;案例 放到代码中演示&#xff1a; 首先&#xff0c;创建一个明星接口&#xff0c;这个接口有一个skill方法&#xff0c;说明只要是明星就必须有点技能。 public interface Star {void skill(); } 然后&#xff0c;创建坤坤对象&#xff0c…

第八天:信息打点-系统端口CDN负载均衡防火墙

信息打点-系统篇&端口扫描&CDN服务&负载均衡&WAF防火墙 一、知识点 1、获取网络信息-服务器厂商&#xff1a; 阿里云&#xff0c;腾讯云&#xff0c;机房内部等。 网络架构&#xff1a; 内外网环境。 2、获取服务信息-应用协议-内网资产&#xff1a; FTP…

服务运营 |精选:床位知多少?医院调度的几种建模方法(下)

编者按&#xff1a; 住院流程&#xff08;Inpatient Flow&#xff09;是一种通过协调和优化医院内部流程&#xff0c;以提高患者入院至出院期间的效率和质量的方法。住院流程通常通过医院内部信息系统和协同工作流程进行管理&#xff0c;以确保患者得到及时的诊断、治疗和护理…

深度学习代码优化(Config,Registry,Hook)

社区开放麦#9 | OpenMMLab 模块化设计背后的功臣 1. 配置文件管理Config 1.1 早期配置参数加载 早期深度学习项目的代码大多使用parse_args&#xff0c;在代码启动入口加载大量参数&#xff0c;不利于维护。 常见的配置文件有3中格式&#xff1a;python、json、yaml 格式的配…

Cytoscape软件下载、安装、插件学习[基础教程]

写在前面 今天分享的内容是自己遇到问题后&#xff0c;咨询社群里面的同学&#xff0c;帮忙解决的总结。 关于Cytoscape&#xff0c;对于做组学或生物信息学的同学基本是陌生的&#xff0c;可能有的同学用这个软件作图是非常溜的&#xff0c;做出来的网络图也是十分的好看&am…

Golang中rune和Byte,字符和字符串有什么不一样

Rune和Byte&#xff0c;字符和字符串有什么不一样 String Go语言中&#xff0c; string 就是只读的采用 utf8 编码的字节切片(slice) 因此用 len 函数获取到的长度并不是字符个数&#xff0c;而是字节个数。 for循环遍历输出的也是各个字节。 Rune rune 是 int32 …

Google分析中的基础概念

当提到Google分析时&#xff0c;我们通常指的是一种用于跟踪和分析网站和应用程序数据的工具。在使用Google分析之前&#xff0c;了解其基础概念对于正确配置和有效使用该工具非常重要。 1、帐户&#xff08;Account&#xff09;&#xff1a;帐户是Google分析中的最高层级。一…

Linux系统之uptime命令的基本使用

Linux系统之uptime命令的基本使用 一、uptime介绍二、uptime命令使用帮助2.1 uptime的help帮助信息2.2 uptime的语法解释 三、uptime的基本使用3.1 直接使用uptime命令3.2 显示uptime版本信息3.3 显示系统运行时间3.4 显示系统最后一次启动时间 四、uptime命令的使用注意事项 一…

案例,linux环境下OpenCV+Java,实现证件照在线更换背景色

先看效果&#xff08;图片来自网络&#xff0c;如有侵权&#xff0c;请联系作者删除&#xff09; 主要是通过java实现的&#xff0c;linux环境编译安装opencv及证件照背景色更换的核心算法在前面一篇文章中有写到。 目前算法还有瞎呲&#xff0c;当照片光线不均的时候会出现误…