不能在electroniC语言 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??我试着用网站上的webpack配置替换电子的webpack配置，但是没有乐趣。

在深入研究了一两天之后，我已经毫无头绪了。我都不知道下一个戳哪儿。关于我可以在哪里挖掘/我可以检查什么以在电子中加载这个CSS文件的任何建议?一个最小的演示库可以在这里找到:https://github.com/FrozenKiwi/data-url-loading，唯一的区别是将违规的CSS声明拉到本地CSS文件

Answer 1

css-loader版本6.5.0的解决方案，是禁用data:url的url加载器。

在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;
},
},
} 
}

Answer 2

在运行webpack v5时使用Semantic-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 3

终于修好了…

electronic - forge安装了最新版本的CSS-Loader，而网站仍然有一个相当旧的版本。降级修复了这个问题。