create-react-appでcss modules

ejectしないで行う方法

• create-react-appはver.2でcss modulesをサポートするため、それまでの繋ぎ
• Roadmap for react-scripts@2.0 · Issue #3815 · facebook/create-react-app

やり方

react-app-rewired, react-app-rewire-css-modules 入れる

ejectせずに、webpack, babel, estlintなどの設定を上書きするツールと、css moduleを有効にするプラグインを使って実現

yarn add --dev react-app-rewired codebandits/react-app-rewire-css-modules

sass-loader node-sass入れる

プラグインがsass-loaderとnode-sassに依存してるのでこれも追加（入れないとエラー吐く）

yarn add --dev sass-loader node-sass

sass使わなくても入れるのが必要

config-overrides.js作って、設定をかく

package.jsonと同じ階層にファイルを置く

//設定例
const rewireCssModules = require('react-app-rewire-css-modules');

module.exports = function override(config, env) {
  return rewireCssModules(config, env);
};

npm scripts修正

create-react-appが生成した

yarn start
yarn build
yarn test
yarn eject

の値を更新

-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"

css moduleを有効にしたいcssファイルの拡張子を .cssから .module.cssに変える

- import style from './style.css';
+ import style from './style.module.css';

style.cssやmodule.cssだとcss modulesが有効にならない