tailwind css配置文件背景图像问题
tailwind css配置文件背景图像问题
提问于 2021-08-04 13:53:27
我没有从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')下面是文件夹结构
我得到了这个输出css
.bg-hero-pattern {
background-image: url(/images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}输出CSS应该是这样的
.bg-hero-pattern {
background-image: url(../images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-05 10:40:50
我希望这个答案对那些和我一样面临同样问题的人有帮助。
在对我的代码进行了很少的研究之后，我找到了解决方案，它对我来说是有效的。我需要在mix.Option中添加这个processcssurls: true,。你可以在这里学习Laravel Mix Options
Stack Overflow用户
发布于 2021-08-05 09:09:51
在路径文件前添加~
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('~/images/px1.gif')",
})
},
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68652516
复制相关文章
相似问题
腾讯云开发者
