Is it possible to change stylesheet URI on production build (webpack / craco)?

Question

when building react app for production build, I would want to change specific stylesheet link from "http://127.0.0.1:4000/custom/styles.css" to "/custom/styles.css"

Is it possible to do that with webpack / craco ? If it's possible how can I achieve this? :)

Answer 1

If you use Create React App you can utilize dotenv variables.

At the root directory create files .env and .env.development, properties should be like:

REACT_APP_STYLESHEET_URI=somevalue

where somevalue can have any value and be different on dev/production.

You can access them in code via:

const uri = process.env.REACT_APP_STYLESHEET_URI

Or in index.html:

<link rel="stylesheet" href="%REACT_APP_STYLESHEET_URI%">