网站开发的基础课程,广州微网站建设信息,教做湘菜的视频网站,网业协同具体指什么UnoCSS是一个好东西#xff0c;可以把任何style样式通过css去描述。但是默认使用的tailwindcss有一个不完美#xff0c;就是当使用图片时#xff0c;背景图片无法通过原子化css直接描述。例如有一个背景图片#xff0c;则必须为该图片单独出一个css样式#xff0c;然后再加…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定义的资源目录。当调试环境时不添加最终的发布路径这样指向的图片在调试和正式环境都可以正常显示。
