在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-ReactCRA？

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

我基本上是试图利用Semantic-UI-React与semantic.min.css一些我自己的在它之上的风格.但似乎我在设置中犯了一些错误.另一个选择可能是继续Semantic UI CSS包裹？...但根据文档,我将无法使用此方法使用自定义样式.

我在这里有点困惑,请帮忙:)

Answer 1

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.

对于它的价值,我自己的"实用终极版"系列教程采用语义-UI-REACT和semantic-ui-css包,我展示如何添加semantic-ui-css在实际终极版,第4部分:界面布局和项目结构.(我在工作中的"真实"项目中也使用了自定义Semantic-UI CSS构建.)