如何使用UNOCSS背景图片

Question

我想在使用UNOCSS时使用backgroundImage，并根据TailwindCSS设置主题，但没有达到预期的效果。请问UNOCSS中的backgroundImage如何实现？

Answer 1

我相信您可以创建自定义规则：

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

然后，您可以使用您的自定义规则：

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

或者你可以在没有自定义规则的情况下尝试这个（如果有效的话请告诉我）：

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