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

Question

在全新的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文件中。

- FrozenKiwi

---

我在这里回答了关于这个问题的内容。希望像我一样，它能解决你的问题。链接 - Arash Yazdani

Answer 1

css-loader版本为6.5.0的解决方案是禁用data: url的url loader。

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

- Lukáš Doležal

---

我这个周末会检查一下！完全忘记了，但总是好解决一些带来很多痛苦的事情！ - FrozenKiwi

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

- Maziyar Mk

Answer 3

终于解决了...

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

- FrozenKiwi