无法通过sass加载本地字体到我的vue应用程序

Question

我使用sass加载器在我的vue应用程序(使用vue CLI 3)的样式，但当我尝试加载本地字体在我的一个scss文件我得到错误这个相对模块没有找到。为了简单起见，我把我的字体文件放在同一个文件夹，我的scss文件(不在资产)，这里的代码:

$sansFont: "notoSans";
@font-face {
font-family: "notoSans";
src: url("regular.ttf");
font-style: none;
font-weight: normal;
}

当我搜索所有我得到的是webpack，我不使用和知道，所以我在文件位置/url犯了一个错误，或者我必须使用附加的包来加载我的SCSS文件中的文件?

Answer 1

这应该适用于vue-cli 3:

@font-face {
font-family: 'notoSans';
src: url('~@/assets/fonts/regular.ttf');
font-style: none;
font-weight: normal;
}

在src: url('~@/assets/fonts/regular.ttf');中，~@指的是您的src路径。你把它存储在哪里，或者你把你的文件夹命名为什么，这取决于你。