在导入CSS语义UI反应的

我将使用语义-UI-反应。在我的项目，但我遇到下面的问题就来了：在导入CSS语义UI反应的

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

文档说的WebPack 1支持但不推荐。我正在使用随Webpack版本1.14.0提供的Create React App。那么这是否意味着我不应该使用Semantic-UI-React与CRA？
对于造型，我也想在我的项目的一些自定义样式，所以我在这个文档中提到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包吗？ ...但根据文档，我将无法使用此方法的自定义样式。

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

来源

2017-06-14 FE_Addict

隋反应的有关不建议使用的WebPack 1的文档注释很简单，因为它不是的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文件的文件夹（根据https://semantic-ui.com/introduction/build-tools.html的说明）。最后，你可以将生成的CSS文件复制到你的项目中，可能在src文件夹中，然后将这些文件导入到你的JS源文件中。

如果您不在意生成自定义的语义UI CSS版本，您可以使用npm install --save semantic-ui-css，它具有默认语义UI主题的预构建版本，并从那里导入CSS。

对于它的价值，我自己"Practical Redux"教程系列采用语义-UI-REACT和semantic-ui-css包，我展示了如何在Practical Redux, Part 4: UI Layout and Project Structure添加semantic-ui-css。（我还在我的“真实”项目中使用了一个自定义的Semantic-UI CSS构建）。

来源

2017-06-14 15:52:18 markerikson

非常感谢这个答案，您的“Practical Redux”教程也很棒！你对语义使用反应和语义使用的反馈意见是什么？我读过几篇文章，他们提到webpack构建过于庞大。就尺寸而言，它是否给您带来了麻烦？ –

说实话，我正在处理的特定应用程序仍处于原型阶段，而我们尚未处理捆绑包大小优化。我会说SUI和SUI-React看起来有点大，所以如果你想创建一个高度优化的包，它们可能不是最好的选择，但是它们确实提供了很多功能和一个很好的基本外观盒子外面。 – markerikson

我也处于我的项目的初始阶段，所以如果size是一个问题，我可能会寻找其他选项..我真的很喜欢antd库，但他们的文档的一部分仍然没有翻译。 React bootstrap看起来也是一个选项。你如何看待React bootstrap和antd？ –

在导入CSS语义UI反应的

回答

相关问题