Webpack - les images de fond ne charge pas

Je suis assez nouveau dans webpack, mais ayant quelques problèmes avec les css-chargeur ou d'un fichier loader.

Je suis en train de charger une image de fond d'écran mais ça ne fonctionne pas tout à fait droit. L'image de fond d'écran n'est pas affiché, même si le devtools montrer la background-image style.

Si je copie le background-image style à la element.style bloc, tout fonctionne bien. Ai-je fait une erreur stupide quelque part?

Le corps de la balise doit avoir une image d'arrière-plan. Le style apparaît dans les outils de développement et il n'y a pas d'erreurs:

Je peux charger le fichier 5a09e4424f2ccffb6a33915700f5cb12.jpg, mais le corps n'a pas de fond.

Si j'copiez et collez manuellement css ligne element.style dans les DevTools, tout fonctionne:

Ce qui se passe si je bundle avec webpack-dev-server ou tout simplement webpack et en Chrome et Firefox.

D'autres styles, comme body { background-color: red } beau travail.

C'est le 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'
    }
};

Avez-vous trouvé une solution à ce à la fin? Je suis d'avoir exactement le même problème

InformationsquelleAutor Eric | 2016-05-18

26

Il y a actuellement un bug lors de l'utilisation de sourceMap avec css-loader. Retrait sourceMap de votre css chargeur devrait résoudre le problème.
```
"module": {
    "loaders": [
        {
            "test": /\.scss$/,
            "loaders": ["style", "css", "sass?sourceMap"]
        },
        { 
            test: /\.jpg$/, 
            loader: "file-loader" 
        }
    ]
}
```
Problème est lié à: https://github.com/webpack/css-loader/issues/296
- J'ai eu le même problème et je ne pouvais pas le comprendre - ce qui a fonctionné pour moi. Merci!!
- Malheureusement, faire qui désactive la source de la carte...
- Vous devriez probablement répondre à cette question pour le webpack équipe pour résoudre sourcemaps: github.com/webpack/css-loader/issues/296
InformationsquelleAutor Sonny
3

Il semble que les navigateurs ne sont pas friands des chemins relatifs pour les images de fond sur la balise body. (voir aussi CSS image d'arrière-plan qui ne se chargent pas et css background-image ne fonctionne pas correctement)

Modifiant le code légèrement semblait faire l'affaire:
- modifier l'URL une URL absolue: background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg). Ce n'est pas l'idéal.
- ajouter une classe au corps, et de modifier les styles de référence de cette classe:
```
<body class="foo">

.foo {
    background-image: url('../img/test.jpg');
}
```
Ni l'un ni l'résoudre la question, mais ne vous obtenir décoller.
- Merci Rob! URL absolue, en effet, de résoudre le problème, cependant l'ajout d'une classe de corps ne fonctionne pas (au moins dans mon entourage). Aussi, le problème n'est pas spécifique à <body>, il se produit également lorsque vous essayez d'appliquer background-image à un <div> ou de tout autre élément. Merci encore!
InformationsquelleAutor robrich

Après aux prises avec ce problème un jour, j'ai enfin compris comment réécrire des url dans les css à l'aide 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/');
        })
    ]
};

InformationsquelleAutor James McGuigan

2

Webpack génère le css et <link>s via blob: url, ce qui semble poser des problèmes avec le chargement des images d'arrière-plan.

Développement de la solution de contournement

Inline les images via le fichier-chargeur de développement (crée de grandes base64 chaîne dans le css)

Mais permet à chaud, rechargement.

De Production solution de contournement

Utiliser le ExtractTextPlugin pour servir le css dans un fichier normal.

InformationsquelleAutor Bob Fanger
2

Où est votre publicPath entrée en sortie? par exemple:

publicPath: 'http://localhost:5000/', //chemin absolu req ici pour les images dans les css pour travailler avec sourcemaps sur. Doit être numérique réelle ip pour accéder sur le réseau local.

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

InformationsquelleAutor Dan Brown

Essayez en utilisant, par exemple:

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 dans webpack:

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

Résultat dans le bundle.css est:

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}

InformationsquelleAutor Daniel Rocha

-1

Vous pouvez également essayer d'utiliser le ~ en face de vos fichiers afin de les webpack revient à l'chargeurs require pour résoudre l'url.
```
background-url: (~assets/image/myimagefile);
```
InformationsquelleAutor Nico

Vous devez vous connecter pour publier un commentaire.