I am using node-sass in react, and wanted to refer to a static image in my public folder, which is not in my src folder.

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

But the sass wouldn't compile saying the image was not found in the src folder.

Module not found: Error: Can't resolve '../images/icon.png'

How can I do this? Or how can I make it ignore this check, or make it refer to public folder which stores my static filespath?

CodePudding user response：

After hours of googling, The only solution I found is to use ~ to reference the very root directory and access the public folder from there.

background-image: url("~/public/images/icon.png");

And this is working fine for me :)

OR And the other alternative would be to move images to the src directory, and this won't be a problem since webpack would pack them in a folder called static/media as static files