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

Question

我正在编写一个库以导入其他项目，以共享自定义组件和样式。
问题在于字体文件，.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(file path) 转换为 url(data:xxx)？或者在编译到库时让自定义字体工作的其他方法？

Answer 1

你可能想考虑使用类似 base64-inline-loader 的东西
根据该页面上的示例:

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