Webpack doesn’t process CSS background image

  css, javascript, node.js, reactjs, webpack

The following Webpack configuration does not allow me to process CSS images as the background property:

background: url('./hero.jpg') no-repeat right;

results in the following error:

ERROR in ./src/app/components/Contact/Contact.style.scss (./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Contact/Contact.style.scss)
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/img/section/hero.jpg' in 

What URL should I pass ass the CSS property so that Webpack would catch it?

Dist directory screenshot:

dist

Public directory screenshot:

public

Source: Ask Javascript Questions

LEAVE A COMMENT