CODEWITHSUNDEEP
javascriptreactjswebpackcreate-react-app
Alex
Alex

Reputation: 1401

React - use relative paths to static assets in CSS

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?

Upvotes: 3

Views: 3345

Answers (2)

Alex
Alex

Reputation: 1401

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!

Upvotes: 3

user7090116
user7090116

Reputation:

Try "homepage": "."

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

Upvotes: 0

Related Questions