ReactアプリにSassを導入する手順

ショートカット

ReactにSass導入
1. create-react-app2以降で作成した場合
2. create-react-app2以前に作った場合

ReactにSass導入

ReactアプリケーションにSassを導入する方法です。

Sassについてはこちら↓

これからはcssはSassで書こう。 - Qiita

ってなんだろう。###・Sass「Syntactically Awesome StyleSheet」Syntactically　＝　構文的に…

create-react-app2以降で作成した場合

create-react-app v2.0以降でReactアプリを作成した場合は、特別な設定もなくSassを使うことができます。

単に下のようにコンポーネントで.sassまたは.scssファイルをインポートして、特別なことを意識せずともそのまま使うことができます。

import './style.scss'

これは、create-react-appであらかじめ必要なライブラリのインストールと設定がされるためです。

参考は下記ページ

Using SASS in React

How to use SASS to style a React application

create-react-app2以前に作った場合

create-react-app v2.0以前で作った場合、必要なライブラリを入れて設定する必要があります。

まず、下記２つのライブラリをnpm installします。

$ npm install --save-dev node-sass
$ npm install --save-dev npm-run-all

node-sassは.scss, .sass形式のファイルを.cssに変換したり圧縮したりしてくれます。npm-run-allは複数のreact-scriptsを実行するためのライブラリです。

次に、package.jsonのscriptsを下記のように編集します。

"scripts": {
    "start": "npm-run-all -p watch-css start-app",
    "build": "react-scripts build && npm run build-css",
    "build-css": "node-sass ./src/style/style.scss -o ./src",
    "watch-css": "node-sass -wr ./src/style/style.scss -o ./src",
    "start-app": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

build-css, watch-css, start-appを追加し、startとbuildコマンドを編集しています。

build-css, watch-cssコマンドではsrc/style/style.scssファイルをsrc/にcssファイルとして出力するよう指定しています。watch-cssではsrc/style/以下のファイルが変更された場合に自動でcssファイルが書き出されます。

指定したパスsrc/style/style.scssにファイルがないとエラーになるので、先にファイルを作っておいて下さい。

startコマンドではreact-scripts startと同時にwatch-cssコマンドも実行するようにし、開発中もscssファイルの変更があれば自動で画面に反映されるようにしています。buildコマンドではreact-scripts build後にbuild-cssも実行するようにしています。

最後に、App.jsでsrc/style.cssファイルを読み込むよう追記すればOKです。

//App.jsに追記
import './style.css'

これでnode-sassにより変換されたcssファイルを読み込むことができます。