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
  • 3,557
  • 1
  • 33
  • 50
Jake He
  • 1,977
  • 3
  • 24
  • 38

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.

Etienne Kaiser
  • 2,634
  • 8
  • 19
  • 29
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,706
  • 14
  • 22
-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
  • 6
  • 18