无法在 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 配置，但没有成功。

经过一天或 4 天的深入研究，我完全没有想法。我什至不知道下一步该戳哪里。关于我可以在哪里 dig/what 我可以检查以在 Electron 中加载此 CSS 文件的任何建议？

可以在此处找到最小的演示存储库：https://github.com/FrozenKiwi/data-url-loading，唯一不同的是将有问题的 CSS 声明提取到本地 CSS 文件

Answer 1

终于修好了...

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

Answer 2

使用 Semantic-UI React 而运行 webpack v5 给出以下错误：

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

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

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

Cannot load inline font in Electron-Forge/Webpack

webpack

electron

webpack-5