无法在 Electron-Forge/Webpack 中加载内联字体

Question

当import 'semantic-ui-css/semantic.min.css'进入一个全新的 Electron-Forge/Webpack5 项目时，我得到以下信息：

UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAO...
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "data:" URIs.

单步执行代码后，此处的格式似乎data:uri与 NormalModule 中提取其格式的正则表达式不匹配：https://github.com/webpack/webpack/blob/e5570ab5230e98e1030d696e84465b5f533fdae9/lib/schemes/DataUriPlugin.js#L16。;;请注意数据 URI 中的双精度，这会破坏正则表达式链接。

然而，这个 CSS 文件在我的网站上加载得很好。当单步执行 webpack 构建时，它们都会加载 CSS 文件（通过https://github.com/webpack/webpack/blob/e83587cfef25db91dc5b86be5b729288fd1bafdd/lib/NormalModule.js#L761中的断点进行验证），然后加载网站。 ..不加载这个数据URL？？？我尝试用网站上的配置替换 Electron 的 webpack 配置，但没有任何乐趣。

经过一四天的研究后，我已经没有任何想法了。我什至不知道下一步该戳哪里。关于我可以在哪里挖掘/可以检查什么以在 Electron 中加载此 CSS 文件有什么建议吗？

可以在这里找到一个最小的演示存储库： https: //github.com/FrozenKiwi/data-url-loading，唯一的区别是将有问题的 CSS 声明提取到本地 CSS 文件中

Answer 1

css-loaderversion的解决方案6.5.0是禁用urlurl的加载程序data:。

在配置的webpack.config.js地方添加这个选项：css-loader

    { 
      loader: 'css-loader', 
      options: {
        url: {
          filter: (url, resourcePath) => {
            // resourcePath - path to css file

            // Don't handle `data:` urls
            if (url.startsWith('data:')) {
              return false;
            }

            return true;
          },
        },
      } 
    }