Tengo el siguiente problema, tengo un archivo de configuración de Webpack en el que he implementado el plugin "mini-css-extract-pliguin" como pueden ver aquí:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env, argv) => {
return {
entry: './src/js/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle'),
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
//use: ["style-loader", "css-loader"],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: ["file-loader"],
}
],
},
plugins:
[
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
title: 'proyecto-webpack',
template: "./src/index.html"
}),
],
}
};
Y tengo un archivo de CSS muy simple:
body{
background: red;
}
header{
text-align: center;
background-image: url("../img/black-cat.jpg");
}
Cuando hago mi npm run build, me da el siguiente error la consola:
ERROR in ./src/css/main.css Module build failed (from >> ./node_modules/mini-css-extract-plugin/dist/loader.js):
He probado al eliminar la propiedad y en ese caso si me exporta correctamente pero quiero sustituya en la propiedad del CSS la URL.
¿Alguien a tenido algún problema parecido?