webpack2でSemantic UI Reactを使う

超かっこいいSemantic UI Reactをwebpack2で使う方法をメモります。

Semantic UI Reactをインストール

$ npm install --save semantic-ui-react 
$ npm install --save-dev semantic-ui

コマンドライン上で色々質問されるので、答えます。どれを選んでもいいですし（カスタマイズしたい場合はCustom）どこに保存させてもいいです。完了すると指定したフォルダに、semanticフォルダが出てきます。これはまだ完成品ではないのでgulpでビルドする必要があります。

Gulpでビルド

$ npm i -g gulp
$ cd semantic
$ gulp build

これでsemanticフォルダの中にdistフォルダができて、その中にsemantic.min.cssがあります。これをindex.jsでインポートします。

import '../semantic/dist/semantic.min.css';

上記パスはsemanticフォルダを保存した場所に合わせます。

ボタンを表示させてみる

Hoge.js

import { Button } from 'semantic-ui-react'

class Hoge extends Component {
  render() {
    return (
      <Button>Hello</Button>
    );
  }
}

これでスタイルも反映されたかっこいいボタンが表示されます。