Vue.js+Webpack从SCSS导入字体报错求助：依赖包字体未找到

你遇到的问题核心是Webpack无法正确解析themify-icons-scss中引用的字体文件路径，同时缺少处理字体资源的必要loader配置。下面是一步步的解决方法：

1. 修复字体路径解析异常 #

错误提示里的../fonts//themify.ttf出现了双斜杠，这是路径拼接时的小问题。你可以通过resolve-url-loader来自动修正这类路径问题，步骤如下：

• 先安装依赖：

npm install resolve-url-loader --save-dev

• 调整Webpack配置中SCSS相关的loader顺序，把resolve-url-loader放在sass-loader之前，同时开启sass-loader的sourceMap（这是resolve-url-loader工作的必要条件）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'resolve-url-loader',
            options: {
              root: path.resolve(__dirname, 'node_modules/themify-icons-scss/fonts')
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
}

2. 配置Webpack处理字体资源 #

Webpack默认不会识别ttf、woff这类字体文件，需要添加专属loader让它能打包这些资源：

• 先安装必要的loader：

npm install url-loader file-loader --save-dev

• 在Webpack的module.rules中添加字体处理规则：

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000, // 小于10KB的字体转成base64嵌入代码，大于的话输出独立文件
    name: 'fonts/[name].[hash:7].[ext]' // 输出字体的存储路径和命名规则
  }
}

3. 快速替代方案：手动覆盖字体路径 #

如果上面的配置没生效，你可以直接在App.vue的样式中重定义字体路径变量，强制指向正确的位置：

// 先定义字体路径，覆盖原SCSS中的变量
$ti-font-path: '~themify-icons-scss/fonts';
// 再导入themify的样式文件
@import "~themify-icons-scss/scss/themify-icons.scss";

完成以上任意一种配置后，重新运行npm run dev或npm run build，字体找不到的错误应该就能解决了。

内容的提问来源于stack exchange，提问作者user762579