Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
69
Help us understand the problem. What is going on with this article?
@yikeda6616

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

More than 1 year has passed since last update.

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レジストリから最新版パッケージを取得してプロジェクトを生成してくれるとのことです。(詳細は公式ドキュメントを参照。)

Sassをインストール

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

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

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

既存のcssファイルをscssにリネーム

./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"
]
...

CSS Module を使う方法

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

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


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

参考:How to use Sass and CSS Modules with create-react-app(英語)

69
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yikeda6616
web dev...

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
69
Help us understand the problem. What is going on with this article?