More than 5 years have passed since last update.

create-react-appでSassやCSS-moduleを使う方法

Last updated at 2019-06-12Posted at 2019-02-06

2018年10月のcreate-react-app v2のリリースで色々簡単になったようなので軽くメモ

少し前まで
create-react-appでSASSファイルを使う方法
こちらの方法でsassを使っていたのですが、今はよりシンプルに使えるようになったようなので、自分用にまとめておきます。

プロジェクトフォルダを生成

Node.jsが入っていれば下記のコマンドを叩いてすぐにスタートできます。(node.jsのインストールは割愛します）

$ npx create-react-app my-project

*npxコマンドはnpm version5.2以降から利用できます。
ローカルにcreate-react-appをインストールしていなくても、npmレジストリから最新版パッケージを取得してプロジェクトを生成してくれるとのことです。（詳細は公式ドキュメントを参照。）

$ cd my-project #プロジェクトフォルダに移動
$ yarn add -D node-sass

yarnでなくnpm i -D node-sassでもokです。

以前は他にも色々インストールしたりwebpackのconfigいじったりで環境設定に時間がかかったわけですが、今はnode-sass入れるだけでOKなので話が早いです。

./src/App.cssを./src/App.scssにリネームします。

それが終わったら、./src/App.jsの3行目にあるimport './App.css'の拡張子も併せてimport './App.scss'に変更します。

これだけでもうsassが使える状態になったので、下記コマンドでアプリを起動してみましょう。

$ yarn start

デフォルトのreactテンプレートが確認できると思います。

あとは./src/_variables.scssなど作成してApp.scssから読み込んでみたり、色々試してみるとちゃんと使えるのが確認できると思います。

ベンダープレフィックスはcreate-react-appでbuildした際にautoprefixerが自動でつけてくれます。

autoprefixのコンフィグはpackage.jsonの"browserslist"に記載されていますので、追記してIE10などに対応することもできます。

package.json

...
"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]
...

[name].module.cssまたは[name].module.scssのようにファイル名を付ければモジュール化されます。

cssモジュールのスタイルのアウトプットは[filename]_[classname]__[hash]のような命名規則で変換されます。

至ってシンプルで使いやすくて助かります