css - tailwind css 配置文件背景图片问题
问题描述
我没有从tailwind.Config.Js
. Tailwind.Config.Js 完美地生成了背景图片,但是当我在浏览器上看到输出时,它正在显示 image 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);
}
解决方案
~
在路径文件前添加
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('~/images/px1.gif')",
})
},
},
推荐阅读
- reactjs - 将 Facebook SDK 添加到 React 网站时出错
- python - LSTM中的Keras输出尺寸不匹配
- java - 如何在 flink minikube 集群中添加依赖?
- c# - 在 .NET Core 2.1 中使用 [FromBody] 时处理模型绑定错误
- c# - 母版页中声明的枚举无法从内容页访问
- java - 在 Java 中解码和替换字符串中的十六进制值
- batch-file - Jenkins 作业在命令启动后卡住
- matrix - 通过按下矩阵中的键移动俄罗斯方块
- powershell - 用于归档所有文件最后修改日期为特定月份的脚本
- java - 如何使用文本转语音节 java API?