Vue.js使用material-design-icons-iconfont编译失败求助

问题原因 #

你导入的material-design-icons-iconfont的CSS文件中，字体引用使用了相对路径./fonts/，webpack编译时会从当前组件所在的src/pages目录下去查找字体文件，而非node_modules里的dist/fonts目录，导致路径解析错误。

解决方案 #

方案1：在组件样式中覆盖字体路径变量 #

在导入CSS前，先定义$material-design-icons-font-path变量，指定字体文件的正确路径：

<style lang="scss">
$material-design-icons-font-path: "~material-design-icons-iconfont/dist/fonts";
@import "~material-design-icons-iconfont/dist/material-design-icons";
</style>

~符号会告诉webpack从node_modules目录开始查找资源，这样就能正确定位到字体文件。

方案2：全局配置字体路径（无需每个组件重复定义） #

在项目根目录创建/修改vue.config.js，通过sass-loader的全局变量配置来统一设置字体路径：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // Vue CLI 3 使用data，Vue CLI 4+ 使用additionalData
        additionalData: `$material-design-icons-font-path: "~material-design-icons-iconfont/dist/fonts";`
      }
    }
  }
}

配置完成后，重启npm run serve，之后所有组件导入material-design-icons时都会自动使用正确的字体路径。

方案3：检查webpack对字体文件的处理（兜底方案） #

如果上述方法无效，确认webpack是否配置了字体文件的解析规则（Vue CLI默认已配置，若手动修改过配置可检查）：
在vue.config.js中添加/确认如下规则：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'fonts/'
              }
            }
          ]
        }
      ]
    }
  }
}

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