plugin - webpack sass loader

Webpack-las imágenes de fondo no se cargan

Question

Soy bastante nuevo en el paquete web pero tengo algunos problemas con css-loader o file-loader.

Estoy intentando cargar una imagen de fondo pero no funciona del todo bien. La imagen de fondo no se muestra, aunque los devtools muestran el estilo de background-image .

Si copio el estilo de la background-image en el bloque element.style , todo funciona bien. ¿Estoy cometiendo un error estúpido en algún lugar?

La etiqueta del cuerpo debe tener una imagen de fondo. El estilo aparece en las herramientas de desarrollo y no hay errores:

Puedo cargar el archivo 5a09e4424f2ccffb6a33915700f5cb12.jpg , pero el cuerpo no tiene fondo.

Si copio y element.style manualmente la línea css a element.style en DevTools, todo funciona:

Esto sucede si hago paquetes usando webpack-dev-server o solo webpack y tanto en Chrome como en Firefox.

Otros estilos, como body { background-color: red } funcionan bien.

Este es el 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''
    }
};

Answer 1

¿Dónde está su entrada publicPath en la salida? p.ej:

publicPath: '' http://localhost:5000/ '', // absolute path req here para que las imágenes en css funcionen con sourcemaps en. Debe ser la IP numérica actual para acceder a la LAN.

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

Answer 2

Actualmente hay un error al utilizar sourceMap con css-loader. La eliminación de 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

Answer 3

Después de luchar con este problema por un día, finalmente descubrí cómo reescribir las URL en css usando postcss.

webpack.config.js

const _ = require(''lodash'');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const argv = {
    verbose:    _.includes(process.argv, ''-v'') || _.includes(process.argv, ''--verbose''),
    json:       _.includes(process.argv, ''--json''),
    production: _.includes(process.argv, ''--production''),
};
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 = {
    verbose:    _.includes(process.argv, ''-v'') || _.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/'');
        })
    ]
};

Answer 4

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

Cambiar el código ligeramente pareció hacer el truco:

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

<body class="foo">

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

Ninguno de los dos resuelve la pregunta real, pero sí lo despegue.

Answer 5

Por favor intente usar, por ejemplo:

html {
   background: url(~/Public/img/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

css-loader en webpack:

{
    test: //.(css|eot|svg|ttf|woff|jpg|png)$/i,
    use: ExtractTextPlugin.extract({
        use: [{
            loader: ''css-loader'',
            options: {
                importLoaders: 1,
                minimize: true
            },
        }],
    }),
},

El resultado en bundle.css es:

html{background:url(/Public/img/bg-picking.jpg) no-repeat 50% fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}

Answer 6

También puede intentar usar el ~ delante de sus archivos para que el paquete web se adapte a los requisitos de los cargadores para resolver la url.

background-url: (~assets/image/myimagefile);

Answer 7

Webpack genera los archivos css y <link> a través de blob: urls, lo que parece causar problemas al cargar imágenes de fondo.

Solución de desarrollo
En línea las imágenes a través del cargador de archivos en desarrollo (crea una cadena base64 grande en el css)
Pero permite la recarga en caliente.

Solución de producción
Use ExtractTextPlugin para servir el css como un archivo normal.