create-react-appで簡単にcss moduleが使えるようになってた。
前略
ディープラーニングおたくを極めるため、G検定を勉強中だが、まあ飽きる。 Reactの勉強として、UdemyのReact 16 - The Complete Guide を受講中で、今日はcss moduleについてつらつらやった。 (ちなみに、今はBlack Friday Saleで安い、Udemyの素晴らしさはいつか書きたい)。
講座内ではcreate-react-appをejectして直接webpackのconfigファイルを変更して、css moduleを導入してたが、version2以降だとそんなことしなくてもいい。
結論から言うと、 「hoge.css」を「hoge.module.css」にして、普通にインポートするだけでcss moduleを使える。
css moduleを使う
css moduleによって、cssをモジュールっぽく使うことができる。しかも、cssのクラス名などはユニークな名前にコンパイルされるため、開発者はcssのスコープに悩まされなくて済むようになる。
create-react-appのversion2以降は「hoge.module.css」というように、.module.cssを加える。
例えば、
.App {
color: red;
text-align: center;
}
と書いたhoge.module.cssファイルを用意したら、javascript(react)側で、
import React from 'react';
import classes from './hoge.module.css'
const hoge = () => {
return <p className={classes.App}>Hello, World</p>
}
export default App;
とすることで、classNameにモジュール感覚でcssを適用することができる。
まとめ
create-react-appをejectしてwebpack.config.dev.jsなどの設定ファイルを直接書き換えるか、新たにモジュールをインストールするなど、前準備が必要であった。
今は.module.cssを加えるだけでよい。
この界隈は更新が早いが、使いやすくなっていっているようでうれしい。
今後
Faster R-CNNの自前実装をやっていて、講座形式にしてまとめたいが、時間がかかる。 こんな感じの小ネタでごまかす。
