Webpack: las imágenes de fondo no se cargan

Esta es la contestación más correcta que te podemos compartir, pero mírala pausadamente y analiza si se adapta a tu proyecto.

Solución:

Actualmente hay un error al usar sourceMap con css-loader. Eliminar sourceMap de su cargador css debería solucionarlo.

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

El problema está relacionado con: https://github.com/webpack/css-loader/issues/296

Parece que a los navegadores no les gustan las rutas relativas a las imágenes de fondo en la etiqueta del cuerpo. (consulte también la imagen de fondo CSS que no se carga y la imagen de fondo css no funciona correctamente)

Cambiar el código ligeramente pareció funcionar:

• cambie la URL a una URL absoluta: background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg). Esto no es lo ideal.
• agregue una clase al cuerpo y cambie los estilos para hacer referencia a esta clase:

.foo 
    background-image: url('../img/test.jpg');

Ninguno de estos resuelve la pregunta real, pero te despega.

Después de luchar con este problema durante un día, finalmente descubrí cómo reescribir URL dentro de css usando postcss

webpack.config.js

const _ = require('lodash');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const argv = ;
module.exports = 
    cache:   true,
    devtool: argv.production ? "source-maps" : "eval",
    output: 
        path: 'public/build',
        filename: '[name].js',
        publicPath: "/build/",
        pathinfo: true // use with devtool: "eval",
    ,
    resolve: 
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx']
    ,
    module: 
        loaders: [
            
                test: /.less$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ].join('!')
            ,
            
                test: /.css$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ].join('!')
            ,
        ]
    

postcss.config.js

const argv =  _.includes(process.argv, '--verbose'),
    json:       _.includes(process.argv, '--json'),
    production: _.includes(process.argv, '--production'),
;
module.exports = 
    plugins: [
        require('autoprefixer')(
            browsers: [
                "> 5%",            // https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
                "last 2 versions", // http://caniuse.com/
            ]
        ),
        require('postcss-url-mapper')(function(url) 
            return argv.production ? url : url.replace(new RegExp('^/'), 'http://localhost:3000/');
        )
    ]
;

Te mostramos comentarios y puntuaciones

Finalizando este artículo puedes encontrar las críticas de otros usuarios, tú todavía tienes la opción de insertar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador