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

【问题标题】：Cannot load inline font in Electron-Forge/Webpack无法在 Electron-Forge/Webpack 中加载内联字体
【发布时间】：2021-10-02 13:49:05
【问题描述】：

当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 文件的任何建议？

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

【问题讨论】：

我回答了here这个问题。我希望它能像我一样解决你的问题。

标签： webpack electron webpack-5

【解决方案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;
          },
        },
      } 
    }

【讨论】：

这个周末我会去看看！完全忘记了，但总是能解决造成如此痛苦的事情！

【解决方案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

【讨论】：

【解决方案3】：

终于修好了……

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

【讨论】：