UnoCSS是一个好东西,可以把任何style样式通过css去描述。但是默认使用的tailwindcss有一个不完美,就是当使用图片时,背景图片无法通过原子化css直接描述。例如有一个背景图片,则必须为该图片单独出一个css样式,然后再加载该样式。
有没有办法弥补UnoCSS这个短板?
经过本人的实践,解决了这个问题。在Vue Plugin的UNOCSS里配置一个正则转换表达式,用来描述该文件:
UnoCSS({
// cc-bg-login-login_bg-jpg --> /assets/login/login_bg.jpg
rules:
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定义的资源目录)。当调试环境时,不添加最终的发布路径,这样指向的图片在调试和正式环境都可以正常显示。