拆分webpack配置后@fluentui/font-icons-mdl2图标无法正常显示求助

安全阿岳

2026-9-25

问题根因

你当前的webpack配置存在两处和图标字体加载相关的问题：

css-loader配置了url: false，导致webpack不会解析处理@fluentui/font-icons-mdl2样式文件中引用字体资源的相对路径
资产加载规则没有覆盖woff、woff2、eot、ttf等字体文件格式，webpack无法正确打包输出字体资源

解决方案

1. 调整css-loader配置

修改webpack.parts.js中loadCss的css-loader配置，无特殊需求可直接删除url: false配置，如果你需要保留对本地自定义资源的url解析禁用，可通过过滤函数处理：

// 修改前
{
  loader: "css-loader",
  options: {
    sourceMap: true,
    url: false,
  },
},

// 修改后
{
  loader: "css-loader",
  options: {
    sourceMap: true,
    // 仅对本地src/assets路径的资源禁用url解析，保留第三方库的字体解析能力
    url: (url) => !url.includes('src/assets')
  },
},

2. 新增字体文件加载规则

在webpack.parts.js的loadAssets方法中新增字体文件的匹配规则：

exports.loadAssets = () => ({
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        type: "asset/resource",
      },
      {
        test: /\.(svg)$/,
        type: "asset/inline",
      },
      // 新增字体加载规则
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[contenthash][ext]'
        }
      },
    ],
  },
});