create-react-app で eject せずに babel-plugin-react-css-modules をあてる

素の create-react-app で eject を行わずに webpack の設定を上書きすることは厳しいみたいです。

そこで、外部パッケージで react-scripts をラップしてやることで、webpack の設定を上書きできるようになります。

メジャーどことしては以下の 3 つが上がるみたいです。

• react-app-rewired
• customize-cra
• @craco/craco

ダウンロード順としてはこんな感じみたいです。

react-app-rewired が頭一つ抜けているイメージでしたが、思ったほど差がないんだなーと。

今回は趣味の開発（レシグル）ということもあり、なんとなく @craco/craco を選んでみました。

まず package.json の scripts を以下の通り書き換えます。

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
}

次に、プロジェクトのルートディレクトリにcraco.config.jsを作り、中身を以下のようにしてやると動きます。

module.exports = {
  style: {
    modules: {
      localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
    },
  },
  babel: {
    plugins: [
      [
        // "react-css-modules" と書いても OK
        "babel-plugin-react-css-modules",
        {
          filetypes: {
            ".scss": {
              syntax: "postcss-scss",
            },
          },
        },
      ],
    ],
  },
};

react-app-rewired や customize-cra だと少し設定が変わりそうですが、とはいえ大差ないと思います。