0

我在使用 webpack v2 和文件加载器加载字体时遇到问题。对任何字体文件使用 url-loader 一切正常。但是，我想使用文件加载器，以便我们可以缓存字体文件，而不是将所有图像和字体存储在捆绑的 js 文件中。

我正在使用 webpack v2、css-modules 和 postcss（和 postcss-loader）。

为了让事情变得简单，我在 global.pcss 样式表中定义了@font-face，它包含在我的主 index.jsx 文件中。（这是调试此问题时的临时措施。通常所有@font-face 声明都在单独的文件中）

@font-face {
  font-family: 'ProximaNova-Rg';
  src: './ProximaNova-Rg';
  font-weight: normal;
  font-style: normlal;
}

:global html {
  font-family: 'ProximaNova-Rg', Comic Sans Ms;
}

在我的 index.jsx 文件中，它是 webpack 的应用程序入口点，我导入了 global.pcss 文件

import './global/global.pcss'

global.pcss 文件中的所有其他样式都已正确应用。

我的 webpack 配置看起来像这样的字体

{
  test: /\.(otf|eot|ttf|woff2?)(\?\S*)?$/,
  use: 'file-loader?name=fonts/[name]-[hash].[ext],
}

如果我将上面的文件加载器换成 url-loader 字体加载正确。使用文件加载器，当我构建项目时，我可以确认文件加载器创建了正确命名的字体文件并将其移动到我的 dist 文件夹，但我的项目加载的是漫画 sans 而不是 Proxima Nova，eww。

我不知道如何继续调试。任何帮助将不胜感激。

4

1 回答 1

0

所以我弄清楚这里发生了什么。将资产（字体/图像）导入样式表并在样式加载器中启用源映射时，问题似乎是文件加载器 + 样式加载器。

styleloader 有一个已知错误，在启用 sourceMaps 的情况下，您不能在 webpack 配置中使用相对 publicPath，而必须使用绝对路径 [参见webpack/style-loader 问题 #55]。

所以 TL;DR 为了解决这个问题，我将 webpack 输出中的 publicPath 从“/”更改为“ http://0.0.0.0:8080/ ”。

于 2017-01-19T16:16:17.020 回答