构建 Vuejs Tailwindcss 背景图片答案

【问题标题】：Build Vuejs Tailwindcss backgroundImage构建 Vuejs Tailwindcss 背景图片
【发布时间】：2021-06-22 13:01:49
【问题描述】：

当我使用 CLI 和 tailwindcss 构建我的 VueJS 应用程序时，tailwind.config.js 的 backgroundImage 部分不起作用。

这是我的代码：

const plugin = require('tailwindcss/plugin')
module.exports = {
...
   backgroundImage: {
      'arrow_back': "url('./assets/img/arrow_back.svg')"
   }
...
}

运行 npm run build 时未创建我的类 bg-arrow_back 我很确定这是因为相对路径，但是当我阅读 CLI 文档时，有人说他们会处理它（并且它与 npm run serve 一样）。

那么，如果你知道如何让它发挥作用呢？

感谢您的帮助！

【问题讨论】：

我遇到了同样的问题，我通过使用 v-bind 添加图像解决了它。 :style="``background-image: url('${myDataImg}')``"
那么，有没有办法将其保留在顺风出口中？使其可重复使用？ ://
我想一定有办法，但顺风文档所说的方式，它对我不起作用。
@J.Doe 你用的是什么版本的 TailwindCSS？
@juliomalves 我在 v2.0.3 上，我猜是最后一个？

标签： javascript vue.js build vue-cli tailwind-css

【解决方案1】：

使用 vitejs 和 vue3 配置必须如下所示：

theme: {
extend: {
  backgroundImage: {
    'logo-test': "url('/src/assets/logo-test.svg')"
  }
},

在 Html 中这样使用它：

<div class="bg-logo-test"></div>

【讨论】：