gpt4 book ai didi

css - Tailwind css 配置文件背景图片问题

转载 作者:行者123 更新时间:2023-12-02 02:04:21 28 4
gpt4 key购买 nike

我没有从 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);
}

最佳答案

在路径文件前添加~

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

关于css - Tailwind css 配置文件背景图片问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68652516/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com