Webpack sass-loader：如何正确使用字体？

Question

Webpack sass-loader：如何正确使用字体？

5

我有以下字体设置：

$font-path: '~@/assets/fonts/';
@font-face {
    font-family: 'mainFont';
    font-weight: 300;
    font-style: normal;
    src: url('#{$font-path}mainFont/mainFont.eot') format('eot'),
    url('#{$font-path}mainFont/mainFont.woff2') format('woff2'),
    url('#{$font-path}mainFont/mainFont.woff') format('woff'),
    url('#{$font-path}mainFont/mainFont.ttf') format('truetype'),
    url('#{$font-path}mainFont/mainFont.svg#mainFont') format('svg');
}

使用vue.js webpack构建时，应用程序的构建结果符合预期，但无法加载字体。因为src url指向错误的目录。要解决这个问题，可以按照建议将$font-path更改为相对于输出文件的文件夹路径，但这样做会导致构建失败，因为找不到字体文件。

- sandrooco

我不知道它是否有效，但是看一下resolve-url-loader。 - Evaldo Bratti

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pavel Denisjuk · Accepted Answer

使用file-loader，在你的规则中使用类似以下内容（示例取自我的项目）：

{
    test: /\.(woff2?|ttf|otf|eot|svg)$/,
    exclude: /node_modules/,
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]'
    }
}

这将把文件复制到您的构建文件夹中，并在您的CSS中注入正确的URL。其次，需要将resolve-url-loader添加到您的scss规则中。

{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
    })
}