web-dev-qa-db-ja.com

Semantic-ui-reactをインストールして使用する方法

React.jsとセマンティックUIを使用してWebクライアントを構築したいと思います。 react.jsでsemantic-uiを使用するノードパッケージがあります。 セマンティックUI反応 。 react.semantic-ui.com/usage の指示に従って、このパッケージをコンピューターに既にインストールしましたが、簡単なWebページでテストしました。

この最後の命令を使用できなかったため、この問題が発生したと思います：import '.../semantic/dist/semantic.min.css';。 semanticフォルダーはプロジェクトのメインフォルダーに生成されましたが、distフォルダーとsemantic.min.cssはまだ生成されていません。これはどこでどのように使用すればよいですか？

NB：これも追加してみました<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> わたしの index.htmlページとページは期待通りのスタイルでした。このオプションは変更できないため、使用したくありません。

node.jsreactjssemantic-ui
7
cdaiga

最初に-cssをインストールしますnpm install semantic-ui-css --save
次に、index.jsページ（最上位レベル）にインポートします
import 'semantic-ui-css/semantic.min.css';

18
Donskikh Andrei

まず、以下のパッケージマネージャーのいずれかを使用して、セマンティックUI反応パッケージをインストールします。

npmユーザーの場合：

npm install semantic-ui-react

糸ユーザーの場合：

yarn add semantic-ui-react

次に、このインポート行をindex.jsに追加します

import 'semantic-ui-css/semantic.min.css'

それで全部です。

私のブログ投稿を参照してください、それはステップバイステップガイドを持っています：
http://videotutorialspot.com/2019/01/08/semantic-ui-for-react-install-and-getting-started/

3
Pasindu Dineth Peiris
npm install sematic-ui-react sematic-ui-css --save

  • ルートファイルにおそらくsrc/index.jsを追加します

    import'semantic-ui-css/semantic.min.css ';

  • いくつかの一般的なレイアウトは[ここ]にあります：（ https://semantic-ui.com/usage/layout.html ）

0
Mbanda

Npmユーザーの場合：

npm i semantic-ui-react semantic-ui-css
0
Manchanayakage Shalika Prasad