在全新的Electron-Forge/Webpack5项目中,当我导入'semantic-ui-css/semantic.min.css'
时,我遇到以下问题:
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?我尝试用网站的Webpack配置替换Electron的配置,但是仍然没有解决问题。
经过一天或四天的挖掘,我已经没有任何想法了。我甚至不知道下一步应该去哪里寻找线索。请问有什么建议可以帮助我找到加载此CSS文件的方法吗?
可以在这里找到一个最小化的演示库:https://github.com/FrozenKiwi/data-url-loading,唯一的区别是将有问题的CSS声明从代码中移出并放入本地CSS文件中。