Dynamically link static css in html
Question
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?
2 answers
solution1
0 2021-10-28 20:15:08
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">
solution2
0 2021-10-29 11:09:06
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.