当前位置 : 主页 > 网页制作 > React >

reactjs – 在Semantic-UI-React中导入CSS

来源:互联网 收集:自由互联 发布时间:2021-06-15
我将在我的项目中使用Semantic-UI-React,但我遇到了以下问题: 文档链接:https://react.semantic-ui.com/usage#css 文档说支持webpack 1,但不推荐.我正在使用随Webpack版本1.14.0一起提供的Create React App
我将在我的项目中使用Semantic-UI-React,但我遇到了以下问题:

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

>文档说支持webpack 1,但不推荐.我正在使用随Webpack版本1.14.0一起提供的Create React App.那么这是否意味着我不应该将语义-UI-React与CRA一起使用?
>对于样式,我也想在我的项目中使用一些自定义样式,所以我选择了文档中提到的Semantic UI包的第三个选项.
npm install semantic-ui –save-dev在内部运行gulp并创建一个语义文件夹.但是文档中没有提到dist文件夹.我应该从哪条路径引用index.js文件中的semantic.min.css?

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

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

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

如果你想构建一个自定义的Semantic-UI CSS文件,是的,你将安装semantic-ui包,这将创建一个包含Semantic-UI的LESS源文件和构建系统的语义文件夹.从那里,您可以对SUI的自定义来源进行任何编辑.完成编辑后,在该语义文件夹中运行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中添加语义ui-css.(我还使用了自定义Semantic-UI CSS在我的“真实”项目中构建.)

网友评论