Vue CLI 3项目使用sass loader加载本地字体提示相对模块未找到如何解决

你不需要额外安装其他依赖包，Vue CLI 3底层默认集成了webpack对字体类静态资源的处理能力，出现This relative module was not found报错是SCSS文件内相对路径的解析规则问题导致的：

• SCSS编译时sass-loader解析url()内的相对路径，是相对于编译后输出的CSS文件位置，而非你当前编写的SCSS源文件位置，所以即使字体和SCSS源文件同目录，直接写url("regular.ttf")也会解析失败。

可用的解决方法 #

方法1：使用public目录（最稳妥，无需关心路径规则） #

1. 在项目根目录的public文件夹下新建专门存字体的目录，比如public/fonts，把regular.ttf放进去
2. 修改SCSS代码里的字体路径为绝对路径即可：

$sansFont: "notoSans";

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

方法2：使用Vue CLI内置别名指定路径 #

如果不想把字体放在public目录，还是想和SCSS文件放在项目src目录下，可以用Vue CLI默认配置的路径别名~@（@指向项目src目录，前面加~告诉webpack这是别名路径）：
比如你的SCSS文件路径是src/style/index.scss，字体文件也放在src/style下，就这么写：

$sansFont: "notoSans";

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

补充注意：你原代码里的font-style: none是无效属性值，正确的有效值为normal/italic/oblique，建议修改为font-style: normal避免浏览器兼容性问题。

内容的提问来源于stack exchange，提问作者Caliph Hamid