Webpack - 无法加载背景图像
Eri*_*ric 24 webpack webpack-dev-server css-loader
我对webpack相当新,但是在使用css-loader或file-loader时遇到了一些问题.
我正在尝试加载背景图像,但它不能正常工作.尽管devtools显示了background-image样式,但未显示背景图像.
如果我将background-image样式复制到element.style块中,一切正常.我在某个地方犯了一个愚蠢的错误吗？
body标签应该有背景图片.该样式出现在开发人员工具中,没有错误:
我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg,但身体没有背景.
如果我element.style在DevTools中手动复制并粘贴css行,一切正常:
如果我在Chrome和Firefox中捆绑使用webpack-dev-server或仅使用它,就会发生这种情况webpack.
其他款式,如body { background-color: red }做工精细.
这是webpack.config.js:
const path = require('path');
module.exports = {
"entry": [
'./src/index.js'
],
"output": {
"path": path.join(__dirname, 'build'),
"filename": "bundle.js"
},
devtool: "source-map",
"module": {
"loaders": [
{
"test": /\.scss$/,
"loaders": ["style", "css?sourceMap", "sass?sourceMap"]
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
},
devServer: {
contentBase: './build'
}
};
小智 26
将sourceMap与css-loader一起使用时,目前存在一个错误.从css加载器中删除sourceMap应该修复它.
"module": {
"loaders": [
{
"test": /\.scss$/,
"loaders": ["style", "css", "sass?sourceMap"]
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
}
问题与:https://github.com/webpack/css-loader/issues/296有关
似乎浏览器不喜欢 body 标签上背景图像的相对路径。（另请参阅CSS 背景图像未加载和css 背景图像无法正常工作）
稍微更改代码似乎可以解决问题：
- 将 URL 更改为绝对 URL：
background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg)。这并不理想。 - 向 body 添加一个类，并更改样式以引用此类：
<body class="foo">
.foo {
background-image: url('../img/test.jpg');
}
这些都不能解决真正的问题，但确实会让你解脱。
| 归档时间： |
|
| 查看次数： |
30044 次 |
| 最近记录： |