本文主要是介绍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定义的资源目录）。当调试环境时，不添加最终的发布路径，这样指向的图片在调试和正式环境都可以正常显示。
这篇关于UnoCSS实现背景图片样式加载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
