css-loader 6加载semantic-ui-css报错，除降级外有无更优解决方案？

问题根因 #

css-loader v6 版本强化了 data URI 格式的严格校验逻辑，而 semantic-ui-css 内嵌的字体文件 data URI 中charset=utf-8后多了一个冗余分号，触发校验失败报错。手动删除分号后图标无法显示是因为修改操作破坏了原base64编码的完整性，导致字体解析失败。

无需降级的最优解决方案 #

方案1：配置 css-loader 过滤异常格式资源 #

修改webpack配置中css-loader的url选项，跳过对存在格式问题的data URI的处理，浏览器原生可以正常识别这类带冗余分号的资源：

// webpack.config.js 对应规则片段
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: (resourcePath) => {
                // 匹配semantic-ui的异常data URI格式，跳过loader处理
                return !resourcePath.includes('charset=utf-8;;base64');
              }
            }
          }
        ]
      }
    ]
  }
}

该方案无需额外安装依赖，改造成本最低，不影响其他css资源的正常解析。

方案2：通过postcss自动修正data URI格式 #

使用postcss-url插件在构建阶段自动替换掉冗余分号，从根源修复格式问题：

1. 安装依赖：

npm install postcss postcss-url -D

2. 新增postcss配置：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-url')({
      url: (asset) => {
        return asset.url.replace('charset=utf-8;;base64', 'charset=utf-8;base64');
      }
    })
  ]
}

该方案完全兼容css-loader v6的所有新特性，不会对后续依赖升级造成阻碍。

方案3：覆盖semantic-ui图标字体声明 #

如果不方便修改构建配置，可在项目全局样式中重写semantic-ui的图标字体声明，替换原错误的内嵌data URI：

@font-face {
  font-family: 'Icons';
  /* 替换为你项目本地存放的semantic-ui字体文件路径即可 */
  src: url('./assets/fonts/icons.woff2') format('woff2'),
       url('./assets/fonts/icons.woff') format('woff'),
       url('./assets/fonts/icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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