Unocss works well with background images in test environments, but does not display them properly when packed into production

一、普通写法

<div bg="center no-repeat" class="bg-[url(./src/assets/uploads/bg.png)]"></div>

二、配置写法

 <!-- <div soumns-min soumns-bg-bg-png>777</div> -->

rules:[
  [
      'soumns-min',
      {
        'min-width': '100vw',
        'min-height': '100vh',
        'box-sizing': 'border-box'
      }
    ],
    // 动态背景
    [
      /^soumns-bg-(.*)$/,
      ([_, d]) => {
        let img = d.split('-')[0]
        let type = d.split('-')[1]
        return {
          background: `url('./src/assets/uploads/${img}.${type}')`,
          'background-size': '100% 100%',
          'background-repeat': 'no-repeat',
          'box-sizing': 'border-box'
        }
      }
    ]
]

[UltraCakeBakery]

This issue is probably not related to unocss. You probably want to read up on https://vitejs.dev/guide/assets.html#the-public-directory

Basically, vite does not bundle your images because they are in your src folder. It isn’t aware of them. You want them in the public folder instead (or the static folder like in frameworks like svelte-kit and nuxt).

[enochzzz]

I created a simple plugin to handle this requirement. vite-plugin-unocss-bgimg