Webpack中Sass-loader引入Font Awesome路径错误求助

我之前也踩过一模一样的坑！核心问题在于Font Awesome自带的_variables.scss里的字体路径是相对于它自身SCSS文件的，但Webpack处理你的主SCSS时，会把主SCSS的目录作为基准解析这个相对路径，直接导致字体找不到。下面是我亲测有效的解决方案：

1. 直接覆盖Font Awesome的字体路径变量 #

在你的主SCSS文件最开头，先强制覆盖$fa-font-path变量，指定正确的路径（这个路径是相对最终生成的CSS文件的位置，也可以用绝对路径）。假设你的目录结构是：

assets/
├── sass/
│   ├── main.scss  # 你的主SCSS文件
│   └── vendor/
│       └── fontawesome/
│           ├── scss/
│           │   └── _variables.scss
│           └── fonts/  # Font Awesome的字体文件存放处
└── webpack.config.js

那就在main.scss最顶部添加：

// 必须在@import Font Awesome之前定义，用!important强制覆盖默认值
$fa-font-path: './vendor/fontawesome/fonts' !important;

// 再引入Font Awesome的主SCSS文件
@import 'fontawesome.scss';

这一步直接绕过了Font Awesome自带的相对路径，强制它使用你指定的正确路径。

2. 调整Webpack的Loader配置 #

之前的配置缺了关键细节：sass-loader必须开启sourceMap，resolve-url-loader才能正确重写路径，而且loader顺序不能乱。修改后的配置如下：

test: /\.scss$/,
use: [
  { loader: "style-loader" },
  { 
    loader: 'css-loader',
    options: {
      sourceMap: true // 辅助resolve-url-loader工作，可选但建议开启
    } 
  },
  { 
    loader: 'resolve-url-loader',
    options: {
      sourceMap: true // 必须开启，否则无法重写路径
    }
  },
  { 
    loader: 'sass-loader',
    options: {
      sourceMap: true, // 这是resolve-url-loader生效的核心前提！
      includePaths: [ 
        path.resolve(__dirname, "assets/sass/vendor/fontawesome/scss") 
      ] 
    } 
  }
]

3. 添加字体文件的Loader配置 #

你还得告诉Webpack怎么处理Font Awesome的字体文件（woff、woff2、ttf等），不然Webpack会报错找不到这些资源。在Webpack配置的module.rules里新增：

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/', // 字体文件输出到dist/fonts目录
        publicPath: '../fonts/' // 如果你的CSS输出在dist/css目录，这里用相对路径指向fonts
      }
    }
  ]
}

为什么之前的方法没生效？ #

• includePaths只是帮Webpack找到Font Awesome的SCSS文件，解决的是@import的路径问题，但改不了Font Awesome内部的字体路径变量；
• resolve-url-loader需要依赖sass-loader生成的source map才能正确重写路径，之前没开启sourceMap所以完全没起作用。

按这个步骤配置后，Webpack就能正确解析Font Awesome的字体路径了！

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