When i'm trying to deploy my react app through the command "npm run build" I got the following:
Failed to compile.
./src/assets/scss/style.scss
Error: Can't resolve '../../../node_modules/bootstrap-icons/images/welcome-image.jpg'
So as you can see its an error related with the welcome-image.jpg. This is how I'm calling it in style.scss (this works in development):
.home-image-container {
background-image: url("../images/welcome-image.jpg");
}
This is my folder structure:
I have two welcome-image.jpg because after the error I tried to call the image from the public folder:
.home-image-container {
background-image: url("/welcome-image.jpg");
}
This is supposed to work according to some forums that I have seen, since with this url it should go directly to the public folder. However for me it appear that its not getting in to the public folder, I deduce this from the error message:
Failed to compile.
Error: Can't resolve '../../welcome-image.jpg'
So what I can guess from here that when I'm putting the url like:"/welcome-image.jpg" It should go to the public folder, but its not reaching it, according to the error its going two folders up, so its going to src file and not the Public.
Finally I decided to do the call of the image directly from the public folder:
.home-image-container {
background-image: url("../../../public/welcome-image.jpg");
}
And again, I got another error:
Module not found: You attempted to import ../../../public/welcome-image.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
I don't really know what should I do next to solve this problem.