Vue + webpack，字体文件转base64

问题描述

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

//_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 进行更多挖掘。如果我在 main.ts 中 import "@/assets/woff/opensans-regular.webfont.woff2";，我可以看到它在主源中将 base64 转换为一个变量，但是我的 _fonts.scss 当然不知道这一点，我的 _fonts.scss 仍然有 src 作为相对路径。似乎 url-loader 对 scss 中的 url() 没有任何作用。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）