无法使用file-loader和webpack v2加载字体

我无法使用webpack v2和文件加载程序加载字体。对任何字体文件使用url-loader，一切正常。但是，我想使用文件加载器，因此我们可以缓存字体文件，而不是将所有图像和字体存储在捆绑的js文件中。无法使用file-loader和webpack v2加载字体

我使用的是webpack v2，css-modules和postcss（和postcss-loader）。

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

@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], 
}

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

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

来源

2017-01-17 jasonleibowitz

所以我想通了这里发生了什么。当将资源（字体/图像）导入到样式表中并在样式加载器中启用sourceMaps时，问题似乎是file-loader + style-loader。

styleloader存在一个已知的bug，在启用sourceMaps的情况下无法在webpack配置中使用相对的publicPath，而是必须使用绝对路径[请参见webpack/style-loader issue #55]。

So TL; DR解决这个问题我把我的webpack输出中的publicPath从'/'改为'http://0.0.0.0:8080/'。

来源

2017-01-19 16:16:17 jasonleibowitz

无法使用file-loader和webpack v2加载字体

回答

相关问题