Je suis assez nouveau sur Webpack, mais j'ai quelques problèmes avec css-loader ou chargeur de fichiers.
J'essaie de charger une image d'arrière-plan mais cela ne fonctionne pas très bien. L'image d'arrière-plan n'est pas affichée, même si les outils de développement affichent le style background-image
.
Si je copie le style background-image
dans le bloc element.style
, tout fonctionne correctement. Est-ce que je fais une erreur stupide quelque part?
La balise body devrait avoir une image d’arrière-plan. Le style apparaît dans les outils de développement et il n'y a pas d'erreur:
Je peux charger le fichier 5a09e4424f2ccffb6a33915700f5cb12.jpg
, mais le corps n'a pas de fond.
Si je copie et colle manuellement la ligne css dans element.style
dans les outils de développement, tout fonctionne:
Cela se produit si je regroupe à l'aide de webpack-dev-server
ou simplement webpack
et à la fois dans Chrome et Firefox.
D'autres styles, tels que body { background-color: red }
fonctionnent correctement.
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'
}
};
Il y a actuellement un bogue lors de l'utilisation de sourceMap avec css-loader. Supprimer SourceMap de votre chargeur CSS devrait résoudre ce problème.
"module": {
"loaders": [
{
"test": /\.scss$/,
"loaders": ["style", "css", "sass?sourceMap"]
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
}
Le problème est lié à: https://github.com/webpack/css-loader/issues/296
Après avoir lutté avec ce problème pendant un jour, j'ai finalement compris comment réécrire les urls dans les fichiers CSS à l'aide de 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/');
})
]
};
Où est votre entrée publicPath en sortie? par exemple:
publicPath: ' http: // localhost: 5000/ ', // le chemin absolu est requis ici pour que les images en css fonctionnent avec des cartes mères. Doit être une adresse IP réelle pour pouvoir accéder au réseau local.
https://github.com/webpack/docs/wiki/configuration#outputpublicpath
Il semble que les navigateurs ne sont pas friands des chemins relatifs vers les images d’arrière-plan sur la balise body. (voir aussi L'image d'arrière-plan CSS ne se charge pas et l'image d'arrière-plan css ne fonctionne pas correctement )
Changer le code semblait faire l'affaire:
background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg)
. C'est loin d'être idéal.<body class="foo">
.foo {
background-image: url('../img/test.jpg');
}
Aucune de ces solutions ne résout la vraie question, mais ne vous déconcentrez pas.
Webpack génère les fichiers css et <link>
s via les URL blob:
, ce qui semble poser problème lors du chargement des images d’arrière-plan.
Contournement du développement
Insère les images via le chargeur de fichiers en développement (crée une grande chaîne base64 dans le css)
Mais permet un rechargement à chaud.
Contournement de la production
Utilisez le ExtractTextPlugin pour servir le fichier css en tant que fichier normal.
S'il vous plaît essayez d'utiliser, 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 le webpack:
{
test: /\.(css|eot|svg|ttf|woff|jpg|png)$/i,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: true
},
}],
}),
},
Le résultat dans 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}