【1分設定】create-react-appで作ったアプリケーションにSassを入れる

数年ぶりにcreate-react-appでフロントエンドのアプリを開発したんですが、Sassの入れ方がカンタンになってたのでまとめます。
結論ですが、node-sassを入れて、scssファイルを作り、読み込ませたいコンポーネントに直接importしてあげるだけです。

執筆時のバージョンは下記。

$ npx create-react-app --version
3.4.1

create-react-appでサンプルのプロジェクトを作る。  今回は「sample-project」にします。

$ npx create-react-app sample-project

そのまま yarn start するとこんな感じ。

ここからSassを入れていきたいと思います。   src配下に下記のように custom.scssを作成します。

.App-header {
  background-color: #fff;
}

そして、App.js に import './custom.scss'; を追加します。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import './custom.scss';

function App() {
.....

ここで yarn start すると下記のエラーが出ます。

./src/custom.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/custom.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
Require stack:
- /Users/keyama4/Desktop/sample-project/node_modules/sass-loader/dist/getDefaultSassImplementation.js
- /Users/keyama4/Desktop/sample-project/node_modules/sass-loader/dist/getSassImplementation.js
- /Users/keyama4/Desktop/sample-project/node_modules/sass-loader/dist/index.js
- /Users/keyama4/Desktop/sample-project/node_modules/sass-loader/dist/cjs.js
- /Users/keyama4/Desktop/sample-project/node_modules/loader-runner/lib/loadLoader.js
- /Users/keyama4/Desktop/sample-project/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/keyama4/Desktop/sample-project/node_modules/webpack/lib/NormalModule.js
- /Users/keyama4/Desktop/sample-project/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/keyama4/Desktop/sample-project/node_modules/webpack/lib/Compiler.js
- /Users/keyama4/Desktop/sample-project/node_modules/webpack/lib/webpack.js
- /Users/keyama4/Desktop/sample-project/node_modules/react-scripts/scripts/start.js

指示のとおり、node-sassを入れます。

$ yarn add node-sass

インストールできたら yarn start
下記の画面が表示されるかと思います。scssあたってますね。

おまけで、cssフレームワークを適用してみます。 今回は、Bulmaを使います。

bulma.io

$ yarn add bulma

node_modules配下のbulmaのディレクトリ構成はこうなってます。

bulma.sassを読み込みます。
custom.scss を下記のように修正。

@import "~bulma/bulma";

.App-header {
  background-color: #fff;
}

yarn start するとbulmaのスタイルが適用されます。 カンタンですね。
数年前は、いろんなパッケージをインストールしてスクリプトを修正しなくちゃいけなかったので感動しました。

ついでに、言わずもがなですがcreate-react-app に --typescript オプションを追加して作ったプロジェクトも同様の手順でSassを入れることができます。