New create-react-app failing to compile sass

Question

I've had issues with my react project and as such i've just made a new reactapp and updated all the packages in my package.json. However, Either the updated react version, react dependancies or node-sass is not allowing the project to be compiled. It installs without any vulnerabilities which is great, but the sass compiler doesn't want to play ball.

Folder structures as follows

--src
  --api
  --assets
    --fonts
    --images
  --components
  --pages
  --scss
    --_variables.scss
    --_media.scss
    --_mavigation.scss
  --App.scss
  --App.js
  --index.js

seems to break whenever i'm referring to background-images in css, i can't seem to get the right path to work, despite the same paths working in an older version of reactjs.

I get the following error

Failed to compile.

    ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
    Module not found: Can't resolve './scss/assets/images/camera.png' in 'xxxproject/src'

The css this is erroring on is as follows;

background-image: url('./assets/images/camera.png');

Anyone got any ideas?

Answer 1

Problem is like

Background url is like

'./assets/images/camera.png'

Node sass tring to resolve it at

'./scss/assets/images/camera.png'' ///scss causing problem 

Solution : use ../ in background-image

 background-image: url('../assets/images/camera.png'); // as per your folder structur