我对 webpack 还很陌生,但是 css-loader 或 file-loader 有一些问题。
我正在尝试加载背景图像,但它不能正常工作。即使 devtools 显示background-image
样式,背景图像也不会显示。
background-image
如果我将样式复制到element.style
块中,一切正常。我在某个地方犯了一个愚蠢的错误吗?
body 标签应该有背景图片。该样式出现在开发者工具中并且没有错误:
我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg
,但正文没有背景。
element.style
如果我在 DevTools 中手动复制并粘贴 css 行,一切正常:
如果我捆绑使用webpack-dev-server
或仅webpack
在 Chrome 和 Firefox 中使用,就会发生这种情况。
其他样式,例如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'
}
};