reactでcss-modules使うときにbabel-plugin-react-css-modulesを使う

特徴

• styleNameというプロパティにstringでcssで設定したclass名を記入する
• stringで設定できるため、cssの命名方法に準拠しながらcss-modulesを利用することができる
• classNameと使い分けができるので、globalなcssを使う場合とで利用用途を分けられる

https://github.com/gajus/babel-plugin-react-css-modules#css-modules

usage

(注意: webpackの設定を自分でできない雑魚なのでcreate-react-appのwebpack設定に便乗してる部分あり)
(注意2: cssの内容は特に意味ないです。ただ書きたいだけ。クラス定義だけはしておかないとエラーになります。)

import*asReactfrom'react';import'/path/to/style.module.scss';constHogeComponent:React.FC=()=>(<divstyleName="hoge-component">HogeComponent</div>
);

.hoge-component{color:red;border:1pxsolidred;background-color:white;border-radius:8px;}

導入手順

• reactでcss modules使うときはbabel-plugin-react-css-modulesを使おう
• 自分が試した環境は以下

- npm -> 6.13.6
- create-react-appをejectしたものを使用

• 以下3つの手順が必要
  • babel-plugin-react-css-modulesxのインストール
  • babelのconfigにpluginの設定追記
  • webpack.config.jsにcssの名称特定をする設定の追記

babel-plugin-react-css-modulesxのインストール

プロジェクト直下にて

$ npm install babel-plugin-react-css-modules (@types/babel-plugin-react-css-modules post-scss)

自分はtypescriptとscss使いたかったのでカッコ内のもまとめてinstallしています。

babelのconfigにpluginの設定追記

"babel":{"presets":["react-app"],"plugins":[["react-css-modules",{"filetypes":{".scss":{"syntax":"postcss-scss"}}}]]}

package.jsonやbabelrcなど任意の場所にpluginの設定をしてください。

webpack.config.jsにcssの名称特定をする設定の追記

create-react-appの恩恵に思いっきり乗っかってhoge.module.scssを使った場合は以下の場所に設定が必要。
.module.css使うぜ！とか普通のcss, scssファイルの設定をカスタマイズして使っている方は、cssのmodule化設定の際にlocalIdentNameを設定しておいてください

{module:{rules:[{oneof:[{test:sassModuleRegex,use:getStyleLoaders({importLoaders:3,sourceMap:isEnvProduction&&shouldUseSourceMap,modules:{// getLocalIdent: getCSSModuleLocalIdent,// ↑をコメントアウトして↓を追記localIdentName:"[path]___[name]__[local]___[hash:base64:5]"},},'sass-loader'),},],},],},}

使ってみてる感想

• わざわざstylesを定義してcssを当てる必要がなくなるので、書いてるときすごい楽
• ただどうしてもhtmlのclassに名前をつけるときのような雰囲気でぱーっと作っちゃうときがあって、リロードするとエラーが起きる(表面上の書き方はどうあれ一応css-modulesなので)
• つまりstyleNameを当てたときにそのclassのスタイルが定義されているかどうかに関してのエラーは吐かれてない。(vscodeの設定でどうにかなんのかな)

のような感じ。個人的にstyled-componentよりもcss-modulesのほうが好きだったというのもあり、これからも重宝して使いそう。

参考

• https://github.com/gajus/babel-plugin-react-css-modules/issues/108

tips
- Webサイト開発にCSS in JavaScriptを使うのはやめよう

最後にちらっとbabel-plugin-react-css-modulesの話が出てきます。ほんのチラッとだけ。