使用带有 scss 的字体真棒 ttf答案

【问题标题】：Using font awesome ttf with scss使用带有 scss 的字体真棒 ttf
【发布时间】：2021-09-23 20:17:19
【问题描述】：

我正在尝试将 font awesome 与 scss 一起使用。

@font-face {
  font-family: 'awesome';
  src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf');
}

路径似乎是正确的，但我遇到了错误：编译失败。

./src/assets/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!. /node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/main.scss) 未找到模块：错误：无法解析 '../../fonts/font-awesome/fa-light-300.ttf' 在 'C:\Users\idogo\Desktop\‏תיקיה חדשה\sprint-4\src\assets\styles'

我希望你能帮助我，谢谢

【问题讨论】：

所以你真的不喜欢need to declare 和ttf 文件，但你的错误只是告诉你文件路径不正确。你能确认/fonts/font-awesome/... 存在于C:\Users\idogo\Desktop\‏‏תיקיה חדשה\sprint-4\src\assets\styles 目录中吗？如果不只是需要修改你的路径。
好的，所以在你的路径中返回几个目录，比如url('../../../../fonts/ ，或者更正为\src\assets\styles设置导入的任何位置，或者将fonts文件夹移动到`\src\资产\样式`目录。无论哪种方式，目标只是让它从您引用它的位置找到文件。
完整目录为：C:\Users\idogo\Desktop\‏‏תיקיה חדשה\sprint-4\src\assets\fonts\font-awesome\fa-light-300.ttf

标签： css sass font-awesome

【解决方案1】：

我只需要在路径的开头添加 ~@。

@font-face {
  font-family: 'awesome';
  src: url('~@/fonts/font-awesome/fa-light-300.ttf') format('ttf');
}

【讨论】：