css - 字体不会通过 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-插件可以使用它。

{
    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'}
        ]
    ),
}