Webpack配合Sass使用FontAwesome时图标无法正常显示问题求助

问题根因 #

你的配置里css-loader关闭了url处理，导致@font-face里的字体路径没有被webpack替换为file-loader输出的正确路径，浏览器无法加载字体文件所以显示空白方块。 #

修复步骤 #

1. 修改webpack.config.js的scss处理规则
   把css-loader的url: false配置删除，开启url处理才能让webpack自动解析替换字体路径：

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
        // 删掉原来的url: false配置
      }
    },
    'resolve-url-loader',
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
      }
    }
  ]
}

2. 删除index.js中所有手动导入字体文件的代码
   css-loader解析到@font-face的url时会自动引入字体文件交给file-loader处理，手动导入属于冗余操作，所有@fortawesome/fontawesome-free/webfonts/开头的导入代码全部删掉即可。
3. 调整$fa-font-path路径匹配你的输出目录结构
   路径是相对于最终编译出的CSS文件的存放位置：

• 如果CSS输出在dist/根目录，webfonts输出在dist/webfonts，那当前配置$fa-font-path: "./webfonts";是正确的
• 如果CSS输出在dist/css/这类子目录下，就需要改成$fa-font-path: "../webfonts";

4. （可选）简化Sass中的图标写法
   Font Awesome 5+的变量本身已经是格式化好的编码，不需要套fa-content函数，直接写即可：

&:before {
  content: $fa-var-twitter;
  font-size: 2em;
  color: #d9534f;
}

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