Fonts 在react router中找不到嵌套路由的字体

我正在使用React、React Router和Webpack（使用

Webpack dev server

），在嵌套路由上加载自定义字体时遇到问题

在我的浅路由（如

/user

、

/group

）上，一切都很好，但是当我有一个嵌套路由（如

/group/user

）时，自定义字体不会加载（404错误）

Webpack构建将所有字体按预期放置在根级别（文件名如

7f690e503a254e0b8349aec0177e07aa.ttf

），并且当显示路径如

/user

时，字体被正确加载

但是，在嵌套路由（如

/group/user

）中，浏览器会尝试从不存在的URL（如

/group/7f690e503a254e0b8349aec0177e07aa.ttf）加载字体

我认为字体在某个地方被假定为相对路径，但我不知道在哪里

如何使字体路径成为绝对路径而不是相对路径？还是有别的办法解决这个问题

不确定这是否重要，但我已在我的
样式中定义了如下所示的字体。less
文件：

// Main font(s)
@font-face {
  font-family: 'Lato-Regular';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
}

由于使用较少，最实用的修复方法是配置基本路径，这样代码生成将根据您的配置生成绝对路径

请查看以下文档：。
在这种情况下，一个可能的解决方案是将添加到页面中。base元素允许您为相对URL地址指定要在整个文档中使用的基本URL。例如设置：

<base href="http://www.youdomain.com/">



然后您就知道所有的相对路径都应该与域的根相对。
我在使用
webpack
和
react router 4
时遇到了同样的问题。我通过在
webpack.config.json
中从
文件加载程序切换到
url加载程序来解决这个问题

工作模块-装载机：

{ test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'url-loader?name=./Scripts/dist/[name].[ext]' }

谢谢，但我很确定这并不是问题的根源。Webpack转换字体并将它们全部存储在根目录下的新名称下。它位于浏览器端的某个位置，决定查找相对于当前嵌套路由URL的字体。您应该检查实际生成的CSS文件-因为浏览器不加载“*.less”JavaScript，而是加载打包程序为其生成的内容。您的输出CSS中肯定有相对路径。谢谢！我将
添加到我的
index.html
中，现在字体按预期加载！这绝对不是我知道和忘记的事情。我甚至不知道
的存在。不过我还是想知道相对URL的来源。