tailwind css 配置文件背景图片问题答案

【问题标题】：tailwind css config file background image issuetailwind css 配置文件背景图片问题
【发布时间】：2021-08-04 13:53:26
【问题描述】：

我没有从tailwind.Config.Js 获得背景图像输出。 Tailwind.Config.Js 完美地生成了背景图像，但是当我在浏览器上看到输出时，它显示的是图像 404。

这是我的代码示例 tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      // backgroundImage: theme => ({
      //   'body-bg': "url('./../images/px1.gif')",
      // })
      backgroundImage: theme => ({
        'hero-pattern': "url('../images/px1.gif')",
       })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这里是 webpack 设置

let mix = require("laravel-mix");

mix.js("src/js/app.js", "js/app.js")
mix.css("src/css/app.css", "css/app.css")
  .options({
    postCss: [require("tailwindcss")],
  }).setPublicPath('public')

这是文件夹结构

enter image description here

我得到这个输出 css

.bg-hero-pattern {
  background-image: url(/images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}

输出的 CSS 应该是这样的

.bg-hero-pattern {
  background-image: url(../images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}

【问题讨论】：

有人来帮助我

标签： css filepath tailwind-css

【解决方案1】：

在路径文件前添加~

theme: {
   extend: {
   backgroundImage: theme => ({
    'hero-pattern': "url('~/images/px1.gif')",
   })
   },
},

【讨论】：

【解决方案2】：

我希望这个答案能帮助那些像我一样面临同样问题的人。

在对我的代码进行一些研究后，我找到了解决方案，并且它对我有用。我需要在 mix.Option 中添加这个 processcssurls: true, 。你可以在这里学习Laravel Mix Options

【讨论】：