使用带有 scss 的字体真棒 ttf

Posted 2023-02-22

【中文标题】使用带有 scss 的字体真棒 ttf

【英文标题】：Using font awesome ttf with scss

【发布时间】：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

【参考方案1】：

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

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