Question

我想使用react.js和语义ui构建一个Web客户端。有一个节点包可以与react.js一起使用semantic-ui; semantic ui react。我已按照react.semantic-ui.com/usage上的说明在我的计算机上安装了此软件包，但是在使用简单的网页进行测试后。

我想我有这个问题，因为我没有使用这最后一条指令： import '.../semantic/dist/semantic.min.css';。已在我的项目主文件夹中生成semantic文件夹，但尚未生成dist文件夹和semantic.min.css。我应该在哪里以及如何使用它？

NB：我还尝试将此<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>添加到我的index.html页面，页面样式符合预期。我不想使用这个选项，因为我不能用它来改变它们。

Answer 1

首先 - 安装css npm install semantic-ui-css --save
然后 - 在index.js页面（最高级别）导入 import 'semantic-ui-css/semantic.min.css';

Answer 2

首先，使用以下软件包管理器之一安装语义UI react软件包。

对于npm用户：

npm install semantic-ui-react

对于纱线用户：

yarn add semantic-ui-react

然后将此导入行添加到您的index.js

import 'semantic-ui-css/semantic.min.css'

仅此而已。

请参阅我的博客文章，其中提供了分步指南：
http://videotutorialspot.com/2019/01/08/semantic-ui-for-react-install-and-getting-started/

Answer 3

npm install sematic-ui-react sematic-ui-css --save

可能在您的根文件中src / index.js添加

导入'semantic-ui-css / semantic.min.css';
可以在[此处]：（{https://semantic-ui.com/usage/layout.html）

Answer 4

对于npm用户：

npm i semantic-ui-react semantic-ui-css

Answer 5

semantic-ui-css是Semantic-ui-react（ SUIR ）的程序包依赖性，并且是具有唯一主题的 css 发行版。 Semantic-ui用Less编写，可对最终样式表（dist/semantic.min.css）的生成提供更大更好的控制（每个组件）。它提供了易于创建以创建自己的主题的几个主题，以及有关如何使大型复杂css井井有条且不会受到 less 的侵扰的正确描述。

在节点v12中，sui-css的安装可能会失败，抱怨ReferenceError: primordials is not defined。看到 https://stackoverflow.com/a/58394828/1874016。

您也可以 git clone https://github.com/semantic-org/semantic-ui 在此处应用上面的补丁。和yarn install

请注意，默认semantic.min.css的大小为 628Kb ，并且您可能不需要 all 组件具有的样式。

如何安装和使用semantic-ui-react

5 个答案: