Question

我在使用webpack v2和file-loader加载字体时遇到问题。对任何字体文件使用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的app入口点，我导入了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。

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

Answer 1

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

样式加载器存在一个已知错误，在启用了sourceMaps的情况下，您无法在webpack配置中使用相对的publicPath，而必须使用绝对路径[请参阅webpack/style-loader issue #55]。

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

无法使用file-loader和webpack v2

1 个答案: