Webpack no puede compilar el proyecto porque no puede resolver la imagen.
Estructura del proyecto
project/ ├─ node_modules/ ├─ src/ │ ├─ assets/ │ │ ├─ images/ │ │ ├─ styles/ ├─ package.json ├─ webpack.config.jsAquí está webpack.config.js
{ test: /\.(JPG|gif|svg|gif|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, type: 'asset/resource', generator: { filename: 'assets/images/[name].[contenthash:7][ext]' }, use: [{loader: 'url-loader'}] },y principal.css
.b-promo { background: url(../assets/images/bg.png) top no-repeat; background-size: cover }Mensaje de error
ERROR in ./assets/css/main.css Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ../node_modules/css-loader/dist/cjs.js): Error: Can't resolve '../assets/images/bg.png' in '/home/path/to/project/src/assets/css'Parece que url () debería tomar una cadena como parámetro , vea aquí
Así que intente en main.css (y asegúrese de que la ruta relativa al archivo bg.png desde main.css sea correcta):
.b-promo { background: url("../assets/images/bg.png") top no-repeat; background-size: cover; }