scss 使用 @font-face 引入 fonticon 字体报错

webpack 内置的路径检索在使用特定方式引入文件时,会出现无法加载字体的问题,例如以下方式:

vue
<style lang="scss" src="./path-to-file.scss"></style>

scss
@font-face {
  font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1501135137439'); /* IE9*/
  src: url('./iconfont/iconfont.eot?t=1501135137439#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./iconfont/iconfont.woff?t=1501135137439') format('woff'), /* chrome, firefox */
  url('./iconfont/iconfont.ttf?t=1501135137439') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./iconfont/iconfont.svg?t=1501135137439#iconfont') format('svg'); /* iOS 4.1- */
}

下载的字体

如果是从 iconfont 下载的字体,将字体放到访问根目录下。

比如 laravel 的访问根目录是 /public,在里面创建字体目录,如 static/fonts/iconfont,将字体放在该目录下。

在 scss 文件中将路径改为绝对路径。如上面的例子,则可以写为:

@font-face {
  font-family: "iconfont";
  src: url('/static/fonts/iconfont/iconfont.eot?t=1501135137439'); /* IE9*/
  src: url('/static/fonts/iconfont/iconfont.eot?t=1501135137439#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/static/fonts/iconfont/iconfont.woff?t=1501135137439') format('woff'), /* chrome, firefox */
  url('/static/fonts/iconfont/iconfont.ttf?t=1501135137439') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('/static/fonts/iconfont/iconfont.svg?t=1501135137439#iconfont') format('svg'); /* iOS 4.1- */
}

其实就是不要 loader 自动寻找文件,而直接输出路径,我们只要事先准备好对应的文件即可。

fontawesome

加载 fontawesome 需要先定义 $fa-font-path 变量,如下:

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome';