字体无法通过webpack

Question

你好亲爱的webpack社区。 我拼命尝试使用文件加载器加载字体 我尝试了这两条规则：

{ test: /\.(woff|eot|svg|otf|ttf)$/i, loader: `file-loader`, options: {name:'fonts/[name].[ext]'}},
{ test: /\.(woff|eot|svg|otf|ttf)$/i, loader: `file-loader?name=fonts/[name].[ext]`},

然而，遗憾的是，在@ font-face规则中要求提取字体时，字体不会被拉出：

@font-face {
    font-family: 'Example';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Example.ttf') format('truetype');
}

这就是我的项目结构：

这是Webpack输出：

在加载fonts.less时，我看不到任何字体是通过src（）的定义加载的。

非常感谢您提前提示！

请在此处查看完整的配置文件：https://gist.github.com/MartinMuzatko/2873b52fed204bd6e8aaaa94527e34a9

Answer 1

问题是您正在使用raw-loader将less-loader的输出转换为JavaScript，以便extract-text-webpack-plugin可以使用它。

{
    test: /\.less$/, use: ExtractTextPlugin.extract(
        [
            {loader:'raw'},
            {loader:'less'}
        ]
    ),
}

less-loader只是将Less语法转换为常规CSS。 url()不会被触及。另一方面，css-loader将它们视为webpack将解析的导入。只有这样你的字体规则才会生效。您需要做的就是将.less规则更改为使用css-loader而不是raw-loader：

{
    test: /\.less$/, use: ExtractTextPlugin.extract(
        [
            {loader:'css'},
            {loader:'less'}
        ]
    ),
}