UnoCSS实现背景图片样式加载

UnoCSS是一个好东西,可以把任何style样式通过css去描述。但是默认使用的tailwindcss有一个不完美,就是当使用图片时,背景图片无法通过原子化css直接描述。例如有一个背景图片,则必须为该图片单独出一个css样式,然后再加载该样式。

有没有办法弥补UnoCSS这个短板?

经过本人的实践,解决了这个问题。在Vue Plugin的UNOCSS里配置一个正则转换表达式,用来描述该文件:

      UnoCSS({// cc-bg-login-login_bg-jpg --> /assets/login/login_bg.jpgrules:configEnv.mode == 'dev'? [[/^cc-bg-(\w+)-(\w+)-(png|jpg|gif)$/,([, dir, fname, fext]) => ({ 'background-image': `url(@/assets/${dir}/${fname}.${fext})` })]]: [[/^cc-bg-(\w+)-(\w+)-(png|jpg|gif)$/,([, dir, fname, fext]) => ({'background-image': `url(${viteEnv.VITE_PUBLIC_PATH}assets/${dir}/${fname}.${fext})`})]]}),

这个表达式的意思,是当class以cc-bg-开头的类转换为style时启动正则转换。多级目录使用-号来定义分隔。而最后的.png或.jpg则写成-png或-jpg,输出的最终目标指向assets目录(vite定义的资源目录)。当调试环境时,不添加最终的发布路径,这样指向的图片在调试和正式环境都可以正常显示。

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

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

相关文章

大小端字节序和字节序的判断+有符号整形和无符号整形的取值范围

大小端存在的意义 大小端字节存储方式(Big-Endian 和 Little-Endian)的存在主要是由于不同计算机体系结构和网络通信标准对数据表示方式的差异所导致的。大小端字节存储方式的存在具有以下意义: 1. 兼容性:不同的计算机系统和网络…

自定义对外开放接口的加解密和签名、验签

背景 公司需要对外开放接口&#xff0c;因此需要进行签名和验签。所以&#xff0c;自定义了一个签名和验签规则。 具体实现 1.定义抽象类 <?phpnamespace App\Library\Signature;abstract class AbstractSecret {/*** 对接ID* var string*/protected $appId ty808732;…

flutter路由跳转

Navigator.of(context).push(); //路由跳转(模块方式) Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return const Page() ;//Page()指页面}, )) Navigator.pushNamed(context, "/") //路由跳转(路由方式) Navigator.pop(cont…

javaWeb网上订餐管理系统

一、简介 在当今社会&#xff0c;随着互联网的普及&#xff0c;网上订餐已经成为了人们生活中不可或缺的一部分。为了方便用户点餐&#xff0c;同时也方便商家管理订单&#xff0c;我设计了一个基于JavaWeb的网上订餐管理系统。该系统分为前台和后台两部分&#xff0c;前台包括…

ChatGPT助力论文写作:详细步骤解析

前言 在论文写作过程中&#xff0c;尽管人工智能工具如ChatGPT能为我们提供有效的辅助&#xff0c;但我们必须铭记&#xff0c;这些工具并不能完全取代我们的思考与判断能力。本指南将详尽地展示如何利用ChatGPT辅助论文写作的全过程&#xff0c;旨在帮助您更高效地完成学术任…

AI基础知识扫盲

AI基础知识扫盲 AIGCLangchain--LangGraph | 新手入门RAG&#xff08;Retrieval-Augmented Generation&#xff09;检索增强生成fastGPT AIGC AIGC是一种新的人工智能技术&#xff0c;它的全称是Artificial Intelligence Generative Content&#xff0c;即人工智能生成内容。 …

java实现https连接总是要报no cipher suites in common

遇到“no cipher suites in common”这样的错误通常意味着客户端和服务器之间没有共同支持的加密套件&#xff08;Cipher Suite&#xff09;。这个问题可能由多个原因引起&#xff0c;包括但不限于SSL/TLS配置错误、Java安全策略限制、客户端或服务器不支持的加密算法等。解决这…

企业产品网络安全建设日志3月25

文章目录 参与推行域名上线安全卡点背景处置 C系云安全认证准备WAF调试 参与推行域名上线安全卡点 背景 未经安全审核的上线动作&#xff0c;对企业的风险首先面临是外部审核的问题&#xff0c;一个企业有各种情况要接受外部的安全审计&#xff0c;各种受雇三方的机构会对公司…

uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件&#xff0c;全局页面路径配置&#xff0c;应用的状态栏、导航条、标题、窗口背景色设置等 main.js 入口文件&#xff0c;主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex&#xff0c;注意uniapp无法使用vue-router&#xff0c;路由须在pag…

[NKCTF 2024]web解析

文章目录 my first cms全世界最简单的CTF解法一解法二 my first cms 打开题目在最下面发现是CMS Made Simple&#xff0c;版本为2.2.19 扫一下发现存在后台登陆界面&#xff0c;直接访问 用字典爆破下admin的密码为Admin123 然后直接登录&#xff0c;去漏洞库搜一下其实存在…

Contos7 安装 Maven

Contos7 安装 Maven 前言 ​ Maven是一个用于构建和管理Java项目的强大工具。它提供了一种简单且一致的方式来构建、测试和部署项目&#xff0c;同时管理项目依赖关系。Maven基于项目对象模型&#xff08;Project Object Model&#xff0c;POM&#xff09;&#xff0c;使用XML…

前端理论总结(css3)——link/import区别 // 伪类/伪元素

伪类/伪元素 1&#xff1a; 伪类使用1个冒号&#xff0c;常见的有&#xff1a;:hover&#xff0c;:link&#xff0c;:active&#xff0c;:target&#xff0c;:not()&#xff0c;:focus等 伪元素使用 2 个冒号&#xff0c;常见的有&#xff1a;::before&…

后端常问面经之Java集合

HashMap底层原理 HashMap的数据结构&#xff1a; 底层使用hash表数据结构&#xff0c;即数组和链表或红黑树 当我们往HashMap中put元素时&#xff0c;利用key的hashCode重新hash计算出当前对象的元素在数组中的下标 存储时&#xff0c;如果出现hash值相同的key&#xff0c;此…

恒创科技:服务器反应慢如何解决?

​  通常来说&#xff0c;访问者会在最初的几秒钟内决定是留在您的网站还是离开。如果页面加载时间超过五秒&#xff0c;访问者离开的可能性就会增加 90%。所以&#xff0c;作为站长们&#xff0c;必须减少服务器响应时间&#xff0c;以确保其网站加载速度更快。以下是减少网…

Mac电脑虚拟显示器:BetterDisplay Pro for Mac v2.0.11激活版

BetterDisplay Pro是一款由waydabber开发的Mac平台上的显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 软件下载&#xff1a;BetterDisplay Pro for Mac v2.0.11激活版 以下是BetterDisplay Pro的主要特点&…

蔚来JAVA面试(收集)

先叠加&#xff0c;这个是自己找的答案不一定对&#xff0c;只是给我参考看看而已。 一、项目 这个没有&#xff0c;根据实际项目情况来。蔚来比较喜欢拷打项目&#xff0c;所以要对项目非常熟悉&#xff08;慌&#xff09; 二、JAVA基础 2.1 Java中的IO模型有用到过吗&#…

python与excel第七节 拆分工作簿

一个工作簿中多个工作表拆分为多个工作簿 假设一个excle工作簿中有多个工作表&#xff0c;现在需要将每个工作表拆分为单独的工作簿。 例子&#xff1a; import xlwings as xw# 设置生成文件的路径path D:\\TEST\\dataIn# 源文件的路径workbook_name D:\\TEST\\dataIn\\产…

Android视角看鸿蒙第九课-鸿蒙的布局

鸿蒙的四大布局 导读 前面八篇文章描述了鸿蒙app的配置文件&#xff0c;关于版本号&#xff0c;开发版本&#xff0c;桌面图标等等配置方式。从这一篇文章开始学习鸿蒙的UI使用方式。 前面我们学习到鸿蒙有ability和page的区分&#xff0c;ability类似Activity但又不完全一样…

2024.3.25力扣(1200-1400)刷题记录

一、1784. 检查二进制字符串字段 1.使用0分割。分割出来的结果是含有“1”的串和空串。 class Solution:def checkOnesSegment(self, s: str) -> bool:# 使用0分割return sum(len(c) ! 0 for c in s.split("0")) < 1 2.遍历 class Solution:def checkOnesS…

如何使用PHP和RabbitMQ实现延迟队列(方式二)?

前言 前几天写了一篇关于PHP和RabbitMQ如何通过插件实现延迟队列的功能。 今天写另外一篇不需要插件的方式&#xff0c;使用RabbitMQ的死信队列&#xff08;Dead-Letter-Exchanges, DLX&#xff09;和消息TTL&#xff08;Time-To-Live&#xff09;。 这种方法涉及到设置消息…