css-loaderとstyle-loaderパッケージをインストール
$ npm install style-loader css-loader --save-dev
webpack.configにcssのためのルールを追加
... rules: [ ... {test: /\.css$/, loader: ['style-loader', 'css-loader']}, # この行を追加。loaderの指定の順番を変えると動かない。
cssファイルを用意して、srcの下あたりに置く。例えばstyles.cssを以下の内容で作る。
#gigantic{font-size:1000px;}.crazy-small{font-size:7px;}
cssを使いたいコンポーネント(例えば、app.tsx)から、cssファイルをインポートする。モジュールと同じように相対パスは指定する。
import"../../css/styles.css"
idやclassでスタイルを適用する。
<divid="gigantic">Tokyo</div><divclassName="crazy-small">Olympic</div>
↧
TypeScript + React + WebpackでCSSを使う(短いです)
↧