21

I have upgraded to the latest Create React App 4.0. Now the scss cannot resolve image assets in the public folder. I was using CRA 3.4.1 before. It worked fine.

Any ideas? I don't want to use npm eject

The icon.svg is in public/images

background-image: url(/images/icon.svg);

Failed to compile.

./src/Components/style.scss 
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''

In Create React App 3.x, referencing an image from the public folder in (S)CSS worked by simply using a starting slash, as has been been answered here.

As the OP has explained, the image is in public/images and is being referenced as url(/images/icon.svg).

This doesn't work in Create React App 4.0.0 anymore and gives the error message Error: Can't resolve '../../../../../../icon.svg' in ''. The changelog of Create React App doesn't mention a breaking change regarding the public folder.

Dario Seidl
  • 4,140
  • 1
  • 39
  • 55
Jake He
  • 2,417
  • 3
  • 29
  • 41

3 Answers3

1

I think it is deprecated in CRA 4, (after all.. it was a breaking change..) there are some workarounds using craco but I suggest to move these files to the src folder.

Ole Pannier
  • 3,208
  • 9
  • 22
  • 33
Zrizi
  • 11
  • 3
1

Try to change to this: (webpack should resolve this to the 'real' path)

background-image: url(./icon.svg);

I know you wanted to add the image as a background-image css property, but maybe another approach is relevant for you.
When you import like this you use it exactly as you would use a normal Component:

import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';

<Icon />

Source: https://create-react-app.dev/docs/adding-images-fonts-and-files/

HedeH
  • 2,869
  • 16
  • 25
-2

As a temporary workaround, you could move the images into src/, import them directly in the components import myImage from '../file.svg' and set style={{ backgroundImage: file }}>?

Alex Gurr
  • 503
  • 1
  • 6
  • 20