时间戳

首页 > 解决方案 > Vue + webpack，将字体文件转换为base64

vue.js - Vue + webpack，将字体文件转换为base64

问题描述

我正在编写一个库以导入其他项目，以共享自定义组件和样式。问题在于字体文件，.woff/.ttf/等。

//_fonts.scss
$woff_path: '~/woff';
$ttf_path: '~/ttf';

@font-face {
    font-family: "MyOpensans";
    src: url($woff_path + "opensans-regular-webfont.woff2") format("woff2");
    src: url($woff_path + "opensans-regular-webfont.woff") format("woff");
    src: url($woff_path + "OpenSans-Regular.ttf") format("font-type");
    font-style: normal;
...
}

$testfont: "MyOpensans", wingdings;

当我在我的 scss 中使用 $testfont 时，url 使用相对路径，这在导入其他项目时当然不起作用。所以，我的想法只是使用base64：

src: url(data:application/x-font-woff;charset=utf-8;base64;XXXX);

如果我通过 base64 转换器运行 .woff 文件并粘贴到 _fonts.scss 中，则工作正常。但是，我希望 webpack 为我做这件事。我已经尝试过 base64-inline-loader 和 url-loader。两者都没有工作。使用 url-loader 进行更多挖掘。如果我import "@/assets/woff/opensans-regular.webfont.woff2";在我的 main.ts 中，我可以看到它将 base64 转换为主源中的一个变量，但我的 _fonts.scss 当然不知道这一点，我的 _fonts.scss 仍然有 src 作为相对路径。似乎 url-loader 对 scss 中的 url() 没有任何作用。

我错过了什么吗？有没有办法让 webpack 为我将我的 url(文件路径) 转换为 url( data:xxx )？或者在编译到库时让自定义字体工作的其他方式？

标签： vue.jswebpackbase64urlloader

解决方案

您可能想考虑使用类似base64-inline-loader

根据该页面上的示例：

rules: [
    {
        test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: ['base64-inline-loader']
    }
]

推荐阅读