MiniCssExtractPlugin 中的字体路径错误

Question

我有404错误，因为字体路径不对。现在是

dist/font

，但页面尝试在

dist/style/font

找到它。

这是我的配置 jsfiddle.net/sicely/z8g5sr9e

我就是这样导入字体的

@font-face {
    font-family: 'Roboto-Bold';
    src: url(../assets/fonts/Roboto-Black.ttf) format("truetype")
}

如果我把我所有的包都放在根目录下，一切正常

Answer 1

        {
            test: /\.(ttf|woff)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[hash:6].[ext]',
                    publicPath: '../',
                },
            },
        }

如果我将 publicPath 添加到文件加载器选项，问题就解决了

Answer 2

我遇到了完全相同的问题。根本原因在于 webpack

output.publicPath

。这是绝对的

"assets/"

。将其更改为相对“/assets/”修复了 MiniCssExtractPlugin 和字体 url 的问题。作者的解决方案也解决了这个问题，但它是一种解决方法。你应该避免绝对的 publicPaths。