Webpack - 背景图片未加载 [英] Webpack - background images not loading

问题描述

我对 webpack 还很陌生，但是在使用 css-loader 或 file-loader 时遇到了一些问题.

I'm fairly new to webpack but having some problems with css-loader or file-loader.

我正在尝试加载背景图片，但效果不佳.即使开发工具显示 background-image 样式，也不会显示背景图像.

I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image style.

如果我将 background-image 样式复制到 element.style 块，则一切正常.我是不是在某个地方犯了一个愚蠢的错误?

If I copy the background-image style to the element.style block, everything works fine. Am I making a stupid mistake somewhere?

body 标签应该有背景图片.样式出现在开发者工具中并且没有错误:

The body tag should have a background image. The style appears in the developer tools and there are no errors:

我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg，但是正文没有背景.

I can load the file 5a09e4424f2ccffb6a33915700f5cb12.jpg, but the body has no background.

如果我在 DevTools 中手动将 css 行复制并粘贴到 element.style，则一切正常:

If I manually copy and paste css line to element.style in the DevTools, everything works:

如果我在 Chrome 和 Firefox 中使用 webpack-dev-server 或仅使用 webpack 进行捆绑，就会发生这种情况.

This happens if I bundle using webpack-dev-server or just webpack and in both Chrome and Firefox.

其他样式，例如 body { background-color: red } 工作正常.

Other styles, such as body { background-color: red } work fine.

这是 webpack.config.js:

This is the 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'
    }
};

推荐答案

当前在将 sourceMap 与 css-loader 一起使用时存在一个错误.从您的 css 加载器中删除 sourceMap 应该可以修复它.

There is currently a bug when using sourceMap with css-loader. Removing sourceMap from your css loader should fix it.

"module": {
    "loaders": [
        {
            "test": /\.scss$/,
            "loaders": ["style", "css", "sass?sourceMap"]
        },
        { 
            test: /\.jpg$/, 
            loader: "file-loader" 
        }
    ]
}

问题与:https://github.com/webpack/css-loader/issues/296

这篇关于Webpack - 背景图片未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！