読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

React:Webpackのcss-loaderを試してみました

Webpackのcss-loaderを試してみました。次のコマンドでインストールします。

$ npm install css-loader style-loader --save-dev
追記

本番環境ではビルド後のファイルを使うのでloader系は-devオプションでdevDependenciesにインストールしておく方がいいみたいです。


CSSファイルを用意します。
f:id:tyoshikawa1106:20160525020556p:plain


classNameを指定します。
f:id:tyoshikawa1106:20160525014341p:plain


componentのJSファイルで次のように宣言する『require("!style!css!./<対象ファイル>.css");』とCSSを読み込むことができます。
f:id:tyoshikawa1106:20160525015139p:plain


webpack.config.jsファイルのmodulesにcss-loaderを利用できるように宣言します。

module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { <略> }
    ]
  }

f:id:tyoshikawa1106:20160525015434p:plain


最後にwebpackコマンドでビルド処理を実行します。
f:id:tyoshikawa1106:20160525015248p:plain


これでcss-loaderをつかってCSSの読み込みが実行できました。
f:id:tyoshikawa1106:20160525015550p:plain


通常はHTMLファイル単位でCSSの読み込み宣言が必要ですが、webpackとcss-loaderを利用することで各コンポーネント単位でCSSを用意することができます。


コンポーネント単位でフォルダを用意して、JSファイル、CSSファイルなどをまとめてようにすると他に影響されないコンポーネント開発ができそうです。React-Starter-KitやIonic2のサンプルコードもこんなファイル構成で開発されていました。
f:id:tyoshikawa1106:20160525020153p:plain