动态链接html中的静态css

Question

我有一个 css 文件，我想在我的 html 中链接（从我的公共目录提供）。

<!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>

这个 css 引用了其他资产作为url ：

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

当我开发公共路径时，其 url 与生产中的 url 不同 - 如何使用 webpack 区分它们？

Answer 1

在 html 中添加文件的完整路径。 如果assets文件夹在public文件夹中，那么你也必须添加public

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

Answer 2

我最终将create-react-app与PUBLIC_PATH变量一起使用，因为这似乎是最简单的方法。

总是可以从那里复制逻辑并在另一个项目中使用它

动态链接html中的静态css

问题描述

2 个解决方案

解决方案1
0 2021-10-28 20:15:08

解决方案2
0 2021-10-29 11:09:06

动态链接html中的静态css

问题描述

2 个解决方案

解决方案1 0 2021-10-28 20:15:08

解决方案2 0 2021-10-29 11:09:06

解决方案1
0 2021-10-28 20:15:08

解决方案2
0 2021-10-29 11:09:06