语义ui React css文件无法编译/使用webpack 5答案

【问题标题】：Semantic ui React css file not compiling/working with webpack 5语义ui React css文件无法编译/使用webpack 5
【发布时间】：2022-06-17 00:56:15
【问题描述】：

我正在制作一个基本的 CRA 应用程序并想使用语义 UI，我按照相同的步骤操作，但只要我在 index.js 中导入 CSS 文件，应用程序就会开始编译并以两个错误完成它，我没有知道我做错了什么。

这里是显示的错误

Cannot read properties of undefined (reading 'get')
during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8

【问题讨论】：

【解决方案1】：

主要的reason 是一个额外的“;”在语义.css 的第 19990 行如果删除，一切都会好起来的。在 'semantic-ui-css/semantic.min.css' 中删除多余的 ';'。

@font-face {
    font-family: 'Step';
    src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw...
}

【讨论】：

这里有一个补丁：github.com/Semantic-Org/Semantic-UI-React/issues/… 来自 Semantic UI React 团队，应该会有所帮助，但它绝对是一个 hack。来这里寻找更好的解决方案
但我只是测试了一下，它似乎工作得很好......

【解决方案2】：

错误可能是semantic.min.css中的双分号引起的

临时（但不是很好）解决方案：在package.json 中的启动/构建脚本前面添加sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css &&

【讨论】：