如何解决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 举报,一经查实,本站将立刻删除。