3

I'm using create-react-app to build an interface for an Electron app. As such, the built React app essentially runs locally rather than from a server.

Naturally I have a load of SCSS being built by React, but as part of the build process my paths are changed from url(../images/my_img.jpg) to url(/static/media/my_img.xyz.jpg)

Obviously for a server environment where files would be stored at the root this is fine, but because my files are running locally the browser (Electron) can't locate the images.

I have set "homepage": "./" in package.json but this has had no effect.

Is there a way to ensure that built CSS uses relative paths rather than absolute?

Alex
  • 1,051
  • 1
  • 12
  • 26

2 Answers2

3

Ok, it's a bit of a hacky workaround, but for now what I've managed to do is...

1) I installed the "replace" NPM package in my project: https://www.npmjs.com/package/replace

2) I then set up a postbuild script in package.json:

"postbuild": "replace 'static' '..' build/static/css/*"

It's not ideal, but it does the job!

Alex
  • 1,051
  • 1
  • 12
  • 26
0

Try "homepage": "."

There are problems possibly to be encountered with "homepage": "." so it works in some cases, but It's not recommended.

  • Unfortunately that doesn't seem to make a difference. Additionally the terminal output still says `The project was built assuming it is hosted at ./.` – Alex Aug 21 '18 at 13:33
  • Where are you compiling? Windows? If so, did you try .\ –  Aug 21 '18 at 13:35
  • I'm compiling on macOS – Alex Aug 21 '18 at 13:36
  • Have you tried by putting nothing between quotes? Some people say that worked for them –  Aug 21 '18 at 13:38
  • That seems to make everything else absolute again, so my app can't find any bundled js or css – Alex Aug 21 '18 at 13:42
  • Can you try any of this? https://github.com/facebook/create-react-app/issues/527#issuecomment-263051964 –  Aug 21 '18 at 13:53
  • Unfortunately no, the PUBLIC_URL variables can only be used in index.html not in css. I guess React / Webpack just can't handle relative assets in CSS. – Alex Aug 22 '18 at 09:11