Search code examples
reactjswebpackbuildproductioncraco

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


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? :)


Solution

  • 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%">