Question

我使用React，React-Router和Webpack（webpack-dev-server），我在嵌套路线上加载自定义字体时遇到问题。

在/user，/group等我的浅路线上，一切正常，但是当我有/group/user这样的嵌套路线时，自定义字体无法加载（404错误）。

Webpack构建将所有字体按预期放入根级别（文件名如7f690e503a254e0b8349aec0177e07aa.ttf），并且在显示类似/user的路径时，字体会正确加载。

但是，当在/group/user这样的嵌套路线中时，浏览器会尝试从/group/7f690e503a254e0b8349aec0177e07aa.ttf这样的网址加载字体，而这些网址并不存在。

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

如何使字体路径成为绝对路径而不是相对路径？或者还有另一种解决方法吗？

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

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

Answer 1

在这种情况下，可能的解决方案是将base element添加到您的网页。基本元素允许您指定在整个文档中用于相对URL地址的基本URL。例如设置：

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

然后您知道所有相对路径应该相对于域的根目录。

Answer 2

我使用webpack和react router 4遇到了同样的问题。我通过在file-loader中从url-loader切换到webpack.config.json来解决这个问题。

工作模块 - 装载程序：

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

Answer 3

当您使用较少时，最实用的修复方法是配置基本路径，以便代码生成根据您的配置生成绝对路径。

请在此处查看较少的文档：http://lesscss.org/usage/。