4

我将在我的项目中使用 Semantic-UI-React，但我遇到了以下问题：

文档链接：https ://react.semantic-ui.com/usage#css

  1. 文档说 webpack 1 受支持但不推荐。我正在使用 Webpack 版本 1.14.0 附带的 Create React App。那么这是否意味着我不应该Semantic-UI-React与 CRA 一起使用？

  2. Semantic UI对于样式，我还希望在我的项目中使用一些自定义样式，所以我选择了文档中提到 的包的第三个选项..npm install semantic-ui --save-dev在gulp内部运行并创建一个semantic文件夹。但是没有dist文档中提到的文件夹。我应该从哪个路径引用semantic.min.css我的 index.js 文件？

我基本上是在尝试使用Semantic-UI-Reactwithsemantic.min.css一些我自己的风格。但似乎我在设置中犯了一些错误。另一种选择可能是继续Semantic UI CSS包装？...但是根据文档，我将无法通过这种方法使用自定义样式。

我在这里有点困惑，请帮助:)

4

1 回答 1

8

SUI-React 文档关于不推荐使用 Webpack 1 的评论仅仅是因为它不是最新版本的 Webpack。Webpack 1 通常仍然可以正常工作。此外，当前版本的 Create-React-App (1.0) 使用 Webpack 2，如果您还没有“退出”您的 CRA 项目，您可以轻松升级react-scripts依赖项以使用最新版本。

如果您想构建自定义 Semantic-UI CSS 文件，是的，您将安装该semantic-ui软件包，这将创建一个semantic包含 Semantic-UI 的 LESS 源文件和构建系统的文件夹。从那里，您可以对 SUI 的源代码进行任何编辑以进行自定义。完成编辑后，gulp build在该semantic文件夹中运行，它将创建一个semantic/dist包含已编译 CSS 文件的文件夹（按照https://semantic-ui.com/introduction/build-tools.html中的说明）。最后，您将生成的 CSS 文件复制到您的项目中，可能在src文件夹中，然后将它们导入您的 JS 源代码中。

如果您不关心生成自定义的 Semantic-UI CSS 构建，您可以npm install --save semantic-ui-css使用默认 Semantic-UI 主题的预构建版本，然后从那里导入 CSS。

值得一提的是，我自己的“Practical Redux”教程系列使用了 Semantic-UI-React 和包，并在Practical Redux，第 4 部分：UI 布局和项目结构semantic-ui-css中展示了如何添加。（我还在工作中的“真实”项目中使用了自定义 Semantic-UI CSS 构建。）semantic-ui-css

于 2017-06-14T15:52:18.217 回答