Webpack 5引入Bootstrap Icons报错缺少对应文件处理loader问题求助

问题根因 #

你的CSS处理规则中配置了exclude: /node_modules/，会直接过滤掉所有位于node_modules目录下的CSS文件，而你引入的bootstrap-icons.css存放在node_modules下，没有被css-loader处理，Webpack无法识别CSS中的@font-face语法，因此抛出Unexpected character '@'错误。

解决方案 #

修改webpack配置中CSS处理规则的排除逻辑，仅排除bootstrap-icons之外的node_modules文件：

{
  test: /\.(sa|sc|c)ss$/,
  // 原exclude: /node_modules/ 替换为下面的规则
  exclude: /node_modules(?!\/bootstrap-icons)/,
  use: [
    // 注意：style-loader和MiniCssExtractPlugin.loader不要同时启用，按需二选一
    process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : "style-loader",
    "css-loader",
    "postcss-loader",
    "sass-loader"
  ]
}

可选优化（适配Webpack 5 特性） #

Webpack 5 内置了资源模块处理能力，无需额外安装file-loader，可替换原有字体/图片处理规则，性能更优：

// 替换原有的file-loader规则
{
  test: /\.(png|eot|woff|woff2|ttf|svg|gif)$/i,
  type: 'asset/resource',
  generator: {
    filename: '[hash][ext]'
  }
}

修改配置后重新运行打包命令即可解决报错。

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