1

I'm migrating my React site to react-static. I have a css in scss files and I use react-static-plugin-sass in my project. How do I set correctly an URL for images in my scss files?

I tried this:

.my-page {
  color: rgb(70, 81, 116);
  &_header {
    border: 1px solid #000;
    background-image: url(/assets/images/bg-illustration.jpg);
  }
}

but when I run the site it gives me the following error:

Cannot GET /assets/images/bg-illustration.jpg

My assets are located in src folder:

-src
--assets
---images
----bg-illustration.jpg

It seems that all images that are mentioned in scss files are just not copied to the result folder with assets.

I'd appreciate any info about how I can fix it in react-static build.

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
Anna Miroshnichenko
  • 1,143
  • 1
  • 7
  • 24

1 Answers1

2

As mentioned in the comment by Eusbolh, you need to use relative path for the URL. E.g:

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

Note that when we start a path with /, e.g. /foo/bar.png, it tries to read the image from public directory.

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
  • thanks for your input, but unfortunately it doesn't work, if I remove "/" it gives an error "ModuleNotFoundError: Module not found: Error: Can't resolve /path to image/". The only one way how it can be compiled without error with path with "/" but in this case there is no image – Anna Miroshnichenko Apr 12 '21 at 17:15
  • here is the repo: https://github.com/annmirosh/react-static-test – Anna Miroshnichenko Apr 12 '21 at 17:47