How to use UNOCSS background image

Question

I want to use the backgroundImage when using UNOCSS and set the theme according to TailwindCSS, but the desired effect is not achieved. May I ask how can I achieve the backgroundImage in UNOCSS?

Answer 1

I believe you can create custom rule:

export default defineConfig({
  ...
  rules: [
    ...
    [/^bgi-\[([\w\W]+)\]$/, ([, d]) => {
      const path = <your path>
      return ({ 'background-image': `url('${path}/${d}')` })
    }],
  ],
})

Then, you can use your custom rules:

<template>
  <div class="bgi-[img.png] bg-no-repeat">
</template>

or you can try this (dk if it works) without custom rule:

<div class="bg-[url(./<path>/img.png)] bg-no-repeat"></div>