Dynamically link static css in html-CodePudding

I have a css file that I want to link in my html (served from my public directory).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="assets/loadSomeFonts.css"></head> <--- this is served from public

  </head>
  <body style="margin: 0px">
    <div id="root"></div>
  </body>
</html>

This css has references other assets as url:

url("/assets/fontsFolder/myfont.ttf")

When I'm developing my public path has a different url than in production - how can I differentiate between them using webpack?

CodePudding user response：

Add the full path of your files in html. if assets folder is in public folder then you have to add public as well

<link rel="stylesheet" href="public/assets/loadSomeFonts.css">

CodePudding user response：

I ended up using create-react-app with the PUBLIC_PATH variable since it seems the easiest way to do this.

Could always copy the logic from there and use it in another project