Webpack+Require导入CSS时Font-face路径异常致Bootstrap图标404

我之前也碰到过完全一样的坑！这个问题的核心是Webpack处理CSS里的字体资源路径时的解析逻辑出了问题——当你用require('bootstrap/dist/css/bootstrap.css')引入样式时，Webpack确实能找到并处理CSS文件，但它默认不会正确重写font-face里的字体路径，导致浏览器请求的路径和实际打包后的字体位置不匹配，就出现了404错误。

下面是几个经过验证的解决方案，按推荐程度排序：

方案一：用file-loader/url-loader处理字体资源（最推荐） #

这是Webpack处理静态资源的标准方式，让Webpack自动打包字体并修正路径。在你的Webpack配置文件里添加以下规则：

module.exports = {
  module: {
    rules: [
      // 先保留你原有的CSS处理规则
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 添加字体文件的处理规则
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/' // 指定字体打包后输出到dist/fonts目录
            }
          }
        ]
      }
    ]
  }
};

配置后，Webpack会自动把Bootstrap依赖的字体文件复制到你指定的输出目录，同时自动修改CSS里的font-face路径，确保浏览器能精准请求到资源。

方案二：调整css-loader的路径解析配置 #

如果你用的是css-loader v3及以上版本，确认一下是否开启了资源路径解析功能（默认是开启的，但如果之前被手动禁用过就需要调整）：

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        url: true // 确保这个选项是true，让css-loader处理CSS里的资源引用
      }
    }
  ]
}

配合上面的file-loader规则一起使用，就能解决路径映射异常的问题。

方案三：手动覆盖Bootstrap字体路径（临时应急） #

如果不想动Webpack配置，也可以通过覆盖Bootstrap的变量来指定正确的字体路径：

• 如果你用的是Bootstrap的Less版本：

// 先引入Bootstrap的变量文件
require('bootstrap/less/variables.less');
// 覆盖字体路径，指向你实际存放字体的位置
$icon-font-path = '../fonts/';
// 再引入Bootstrap主样式
require('bootstrap/less/bootstrap.less');

• 要是用的是纯CSS版本，只能手动修改Bootstrap CSS里的font-face路径，但这种方式不推荐，因为每次更新Bootstrap都要重复修改，太麻烦。

至于为什么把字体移到项目根目录就能用？其实是因为浏览器请求的路径（比如/glyphicons-halflings-regular.woff2）刚好对应根目录下的字体文件，相当于绕开了Webpack的路径解析问题，但这只是临时的权宜之计，还是用前两种方案更稳妥。

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