SCSS通过@font-face引入Ageya字体时提示模块找不到路径解析报错

数据老陈

2026-9-1

报错原因

相对路径配置错误：App.scss文件本身位于./src目录下，构建工具解析相对路径时，会以当前scss文件所在目录作为基准。代码中写的./src/fonts/Ageya.otf会被解析为src/src/fonts/Ageya.otf，多嵌套了一层src目录，和实际文件路径不匹配，因此触发模块找不到的报错。
存在额外语法隐患：原代码format()写法不符合CSS规范，一是和url()之间错误加了逗号分隔，二是格式标识填写错误（otf对应标识为opentype、ttf对应标识为truetype，不能直接写文件后缀），就算路径正确，该写法也会导致字体加载异常。之所以ttf路径暂时没报错，是因为loader解析到第一行错误就直接终止编译，还没执行到第二行ttf的解析逻辑。

修复方案

前置检查：确认Ageya.otf、Ageya.ttf两个字体文件实际存放路径为项目根目录/src/fonts/，没有放错位置。
替换App.scss中的@font-face代码，修正路径和语法错误：

@font-face {
    font-family: 'Ageya';
    src: url('./fonts/Ageya.otf') format('opentype'),
         url('./fonts/Ageya.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}