【個人的】webpackでreactするときのCSS環境のベストプラクティス

個人的ですが。

CSSModulesを使う

CSSModulesを使います。これに関しては賛否あり、確かに微妙な点はありますが、とりあえずはこれで良い気がします。CSSModulesに限界を感じるようだったらRadium等のCSS in JSを試してみてください。僕が使うwebpack.config.jsの経過はこんな感じ。あとはお好きに設定を。

webpack.config.js

{
  test: /\.css$/,
  include: __dirname + '/src',
  exclude: /node_modules/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: true }
  }, {
    loader: 'css-loader',
    options: {
      localIdentName: '[sha512:hash:base32]-[name]-[local]',
      modules: true,
      sourceMap: true
    }
  }
}

（追記: localIdentNameはlocalIdentName: '[sha512:hash:base32]-[name]-[local]'みたいにしないとファイル名とクラス名を同じにした時に衝突が起きることにあとから気づいた。

Stylusを使う）

Stylusを使います。CSSメタ言語のうちの１つで、変数定義やメソッド定義、子要素への簡潔なアクセス、シンプルな文法など便利な機能がたくさんあるので、オススメです。

index.styl

$header-color = #ffffff
$subtitle-color = #939395
.root
  h1
    color $header-color
  h2
    color $subtitle-color

webpack.config.jsはこんな感じになります。こちらもお好きに設定を。

webpack.config.js

{
  test: /\.styl$/,
  include: __dirname + '/src',
  exclude: /node_modules/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: true }
  }, {
    loader: 'css-loader',
    options: {
      localIdentName: '[sha512:hash:base32]-[name]-[local]',
      modules: true,
      sourceMap: true
    }
  }, {
    loader: 'stylus-loader',
    options: { sourceMap: true }
  }]
}

少なくとも、CSSをそのまま書くよりは圧倒的に短くかけるしストレスが減ります。お気に入りのCSSメタ言語がある人はそれを使ってもいいと思います。

nibを使う

nibを使います。これはStylus用のユーティリティやmixin機能等を提供してくれるライブラリです。詳しくはドキュメントを見てください。これはwebpack2以降だとwebpack.config.jsでwebpack.LoaderOptionsPluginを使って設定します。

webpack.config.js

plugins: [
     new webpack.LoaderOptionsPlugin({
       options: {
         stylus: {
           use: [require('nib')()],
           import: ['~nib/lib/nib/index.styl']
         }
       }
     })
   ]

ちなみに、importの所に任意のstylファイルを追加すれば、そこで定義した変数やメソッドを使えるようになります。色は全てそこで定義しておくとわかりやすくていいと思います。個人的ですが。