AdminLTE项目中CKEditor与SVG加载器冲突问题求助

这个问题我之前也碰到过，核心原因就是两个SVG Loader规则的匹配范围重叠了，导致Font Awesome的SVG被错误地用raw-loader处理，或者CKEditor的SVG没被正确加载。下面给你一个可靠的解决方案：

关键思路 #

让不同来源的SVG文件匹配对应的Loader：

• Font Awesome及项目其他SVG：继续用url-loader处理，保持原有配置但确保排除CKEditor的资源目录
• CKEditor的SVG图标：仅让CKEditor自身的SVG文件使用raw-loader，通过精确的路径正则来限定匹配范围

修改后的Webpack配置示例 #

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      // 处理Font Awesome、项目自身的图片及SVG
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: path.resolve(__dirname, "node_modules/@ckeditor"), // 排除CKEditor资源
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      // 仅处理CKEditor 5的图标SVG
      {
        // 这个正则只会匹配CKEditor官方包内的图标文件
        test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
        use: ['raw-loader']
      },
      // ... 其他Loader规则
    ]
  }
};

为什么这样能解决问题？ #

1. 第一个规则会处理所有非CKEditor目录下的SVG（包括Font Awesome的SVG），用url-loader转成base64或者输出到指定目录，保证图标正常显示
2. 第二个规则通过精准的路径正则，只匹配CKEditor官方包内的图标SVG文件，用raw-loader加载成原始文本，符合CKEditor的要求
3. 两个规则的匹配范围完全不重叠，不会互相干扰

额外注意事项 #

• 确保你已经安装了raw-loader：执行npm install raw-loader --save-dev或者yarn add raw-loader -D
• 如果你的CKEditor是自定义构建的，路径可能略有不同，调整第二个规则的test正则即可，核心是只匹配CKEditor相关的SVG文件

这样调整后，你就能同时正常使用CKEditor和Font Awesome的SVG图标了~

内容的提问来源于stack exchange，提问作者Milo van Loon