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定义的资源目录)。当调试环境时,不添加最终的发布路径,这样指向的图片在调试和正式环境都可以正常显示。