0

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?

1
  • @Israel-ICM gracias por la edición y disculpa. Son las prisas aunque no hay excusa, saludos Commented el 3 dic. 2020 a las 8:09

1 respuesta 1

0

Estas usando webpack 5 ? Por lo que he probado te da error por la importacion de la umagen. Tuve el mismo problema y lo que hice fue agregar las propiedades type y generator aqui:

test: /\.(png|svg|jpe?g|gif)$/i,
type: 'asset/resource',
generator: { filename: './images/[name].[contenthash][ext]' }

Yo genere el archivo css dentro de la carpeta css, y las imágenes se guardan en la carpeta images en la raíz, despues modifique la regla de scss y css a lo siguiente:

{
test: /\.(c|sc|sa)ss$/,
use: [
      {
         loader: MiniCssExtractPlugin.loader,
         options: {publicPath: path.relative(__dirname, '../', 'images')},
      },
      'css-loader',
      'sass-loader',
     ]
}

En tu caso el plublicPath qudaria

publicPath:  path.relative(__dirname, ' ')

Aqui hay informacion sobre esto : type: 'asset/resource' y generator https://dev.to/smelukov/webpack-5-asset-modules-2o3h

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.