Webpack4引入font-awesome SCSS报错：无法解析字体文件

这问题我之前碰到好多次了，核心原因是Font Awesome 4.x的SCSS文件引用字体的路径逻辑，和Webpack默认处理SCSS的方式不兼容，而CSS版本已经预先处理好了路径，所以能正常工作。咱们一步步拆解：

为什么SCSS版本报错，CSS版本却正常？ #

• Font Awesome 4的SCSS文件里，字体引用用的是相对路径（比如../fonts/），这个路径是相对于它自己的scss目录的。当你用~font-awesome/scss/font-awesome.scss引入时，Webpack会从node_modules里加载这个SCSS文件，但里面的相对路径不会自动转换成Webpack能识别的资源路径，导致找不到字体文件。
• 而Font Awesome的CSS文件里，字体路径已经是相对于CSS文件的正确相对路径，Webpack处理CSS时，会自动配合file-loader/url-loader解析这些资源引用，所以不会报错。

两种解决办法，任选其一就行 #

方法1：手动设置Font Awesome的SCSS变量（最简单） #

在引入font-awesome的SCSS文件之前，先设置$fa-font-path变量，指定字体文件的正确路径（用~让Webpack从node_modules里找）：

// index.scss
$fa-font-path: '~font-awesome/fonts'; // 直接指向node_modules中的fonts目录
@import '~font-awesome/scss/font-awesome.scss';

这样SCSS编译时，所有字体引用都会替换成这个路径，Webpack就能正确识别并调用file-loader处理字体文件了。

方法2：配置Webpack的loader来修正路径（更通用） #

如果你的项目里有其他SCSS文件也存在相对路径引用资源的问题，推荐用这个方法：

1. 先确保安装了必要的loader：

npm install --save-dev resolve-url-loader file-loader sass-loader@^8.0.0

（注：Webpack 4对应sass-loader的8.x版本比较稳定，高版本可能有兼容问题）

2. 修改Webpack配置文件中的module.rules：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // 处理SCSS文件
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 或者用mini-css-extract-plugin提取成单独CSS文件
          'css-loader',
          {
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true // 必须开启，resolve-url-loader依赖source map解析路径
            }
          }
        ]
      },
      // 处理字体文件
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/' // 字体文件会输出到dist/fonts目录下
            }
          }
        ]
      }
    ]
  }
}

resolve-url-loader的作用就是修正SCSS中的相对路径，把它们转换成Webpack能识别的绝对路径，配合sass-loader的sourceMap才能正常工作。

验证 #

配置完成后，重新运行Webpack，字体文件应该会被正确复制到输出目录，SCSS编译也不会再报找不到字体的错误了。

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