无法在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中的双;;，它打破了链接的RegEx。

然而，这个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

在运行webpack v5时使用语义UI React会给出以下错误：

Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "data:" URIs.
TypeError: Cannot read property 'get' of undefined

在github上发现了这个问题，它说服我切换到另一个UI框架：https://github.com/Semantic-Org/Semantic-UI-React/issues/4287

Answer 2

终于把它修好了。

Electron-Forge安装了最新版本的CSS-Loader，而该网站仍然有一个相当旧的版本。降级解决了这个问题。