在 Semantic-UI-React 中导入 CSS

Question

我将在我的项目中使用 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 文件夹。我应该从哪个路径引用我的 index.js 文件中的 semantic.min.css？

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

我有点困惑，请帮助:)

Answer 1

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

如果您想构建自定义 Semantic-UI CSS 文件，是的，您将安装 semantic-ui 包，这将创建一个包含 Semantic-UI 的 LESS 源文件和构建系统的 semantic 文件夹。从那里，您可以对 SUI 的源代码进行任何编辑以进行自定义。完成编辑后，在 semantic 文件夹中运行 gulp build，它将创建一个包含已编译 CSS 文件的 semantic/dist 文件夹（按照 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 和 semantic-ui-css 包，我展示了如何在 Practical Redux, Part 4: UI Layout and Project Structure 中添加 semantic-ui-css。 （我还在工作中的“真实”项目中使用了自定义 Semantic-UI CSS 构建。）