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

2020-07-15

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

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

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

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

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-rewiredcustomize-cra だと少し設定が変わりそうですが、とはいえ大差ないと思います。

© 2018 kk-web