Vue CLI项目中无法通过Webpack导入IcoMoon自定义字体怎么办？

嘿，我来帮你梳理下这个问题的解决思路！你遇到的错误大概率是字体路径不对或者样式引入方式不符合Vue CLI的资源处理规则，先不用急着改Webpack配置，咱们一步步来排查：

第一步：整理字体文件的存放位置 #

先把IcoMoon下载包里的字体文件（.eot/.svg/.ttf/.woff这些）移到Vue项目的src/assets/fonts文件夹里（没有的话新建一个），这样符合Vue项目的资源管理习惯。

第二步：修正字体路径 #

IcoMoon生成的style.css里的字体路径是相对它自身所在位置的，如果你把字体文件移到了assets/fonts，那原style.css里的路径肯定不对了。你有两种处理方式：

• 直接修改style.css里的@font-face规则，把路径改成相对于当前样式文件的路径，比如：

  @font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?xxxx'); /* 假设style.css在assets/styles下，fonts在上一级的fonts文件夹 */
    /* 其他src路径同理修改 */
  }
  

• 或者用Vue CLI的别名~@（对应src目录），这样路径更可靠，不用管相对位置：

  @font-face {
    font-family: 'icomoon';
    src:  url('~@/assets/fonts/icomoon.eot?xxxx');
    src:  url('~@/assets/fonts/icomoon.eot?xxxx#iefix') format('embedded-opentype'),
          url('~@/assets/fonts/icomoon.ttf?xxxx') format('truetype'),
          url('~@/assets/fonts/icomoon.woff?xxxx') format('woff'),
          url('~@/assets/fonts/icomoon.svg?xxxx#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  

第三步：正确引入样式到defaults.scss #

不要直接引用IcoMoon原下载包里的style.css（路径不对容易出错），建议：

• 把修改好路径的style.css内容复制到defaults.scss里，或者
• 在defaults.scss里用@import引入修改后的style.css，比如：

  @import './assets/styles/icomoon-style.css'; /* 假设你把修改后的style.css重命名成这个，放在assets/styles下 */
  

第四步：检查Webpack字体规则（一般不用改） #

Vue CLI默认的Webpack配置已经处理了常见字体格式，你可以确认下项目里的规则是否包含这些后缀，默认规则大概是这样的：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  }
}

如果你的项目里这个规则存在，就不用额外调整，它会自动处理字体文件的打包和路径映射。

最后测试 #

在Vue组件里用IcoMoon提供的图标类名，比如：

<template>
  <span class="icon-home"></span>
</template>

启动项目，看看图标能不能正常显示~

内容的提问来源于stack exchange，提问作者Abdallah R. Awad