create-react-app

create-react-appとCSS


はじめに

いまの時代、Reactで開発環境を作るならCSSを直接書いていく人は少なくSASSLESScss modulesstyled-componentsなどを使うと思います。

Reactはフルスタックフレームワークでは無いので開発環境を作るのが他に比べ大変です、そこでFacebookがモダンな開発環境キットとしてcreate-react-appを公開しています。

ただ、このcreate-react-app初期状態ではCSSだけに対応しています。

そこで現状、どういう選択肢があるかの個人的な覚書です。

注意: Ejectはしない

Ejectすれば隠されている複雑な設定ファイルを自分で変更する事ができますが、あとあと面倒になるのでEjectしないで何ができるかです。


SASS or LESS

Adding a CSS Preprocessor (Sass, Less etc.) 公式に説明ありますのでその通りに導入すればEjectせずに使用可能です。


css modules

create-react-app v2.x からcss modulesが対応します。

Githubのprojectに進捗がありますが正式リリースはもう少し時間かかりそうです。

create-react-app で CSS Modules を使う

現状ではアルファ版として一応使えます。


styled-components

CSSを別で処理するわけではないのでcreate-react-app関係なく使用可能です。

以上。