Sassは、今では多くの開発の現場で導入されているため、キャッチアップしている方も多いかと思います。ただ、言語や環境ごとに導入方法が異なることもあり、私自身も初めて使う時には、中々書いたスタイルが反映されず、困った経験があります。。。
そういった経験も踏まえて、本記事では、React.jsの環境でSassを使用する方法についてご紹介します。現在のReactのバージョンですと、これまでの方法が非推奨となっているので、これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっております。
以下、本記事を通して得られる情報になります。
- React.jsの環境準備 : 別記事紹介
- sassパッケージのインストール
- React + Sass : サンプルコード(検証用)
React.jsの環境準備
Reactの開発環境構築方法(Windows & Mac)は、以下の記事で解説しております。

Sassを使うための準備
ReactでSassを使うためには、「sass」というパッケージをアプリフォルダ内にインストールしてあげる必要があります。まずは、cdコマンドで「react-sass」フォルダへ移動しましょう。
cd react-sass
npm install sass
以下、実行例になります。(Windowsになりますが、Macでもコマンド実行後の動作は同じです。)
サンプルコード
Sassを活用したスタイリング方法(styled-components<React向けのCSS-in-JSライブラリ>, 外部の.scssファイルから読み込む, CSS Modules…など)にもいくつかありますが、今回は、外部の.scssファイルから読み込む方法でやってみようと思います。
フォルダの構成
現在、以下のようなフォルダ構成になっているかと思いますが、追加で.scssファイルと.scssファイルを格納するstylesフォルダをsrcフォルダ直下に作成しましょう。
※ 使わないファイル等は削除したほうがよいのですが、消すとエラーが発生するものがあるため、今回はそのままで作業するものとします。
react-sass(root)
- node_modules
- public
- src
- App.js
- index.js
- index.css
- reportWebVitals.js
- setupTests.js
styles
- style.scss
- package-lock.json
- package.json
- README.md
コードを修正・追加
App.js
App.jsではstyles.scssをimportし、classNameを属性として設定します。class名は、CSSで書く時と同様に””(ダブルクォテーション)もしくは、”(シングルクォーテーション)で囲みます。
今回は、class名を「p_style」としまして、p要素内に書いている文字列に装飾をつけていこうと思います。
// style.scssをimportする
import "./styles/style.scss"
const React_sass = () => {
return (
<div>
<p className="p_style">テスト</p>
</div>
)
}
export default React_sass
style.scss
フォントサイズを18px, 文字色を赤にします。文字列の上にカーソルが乗っかったら文字色を緑に出来るようにhoverも設定してみました。
.p_style {
font-size:18px;
color:red;
&:hover {
color: green;
}
}
アプリを実行してみる
ここまで記述が出来ましたら、カレントディレクトリへ移動し、次のコマンドを実行しましょう。
npm start
エラーなどが出ずに以下の画面が表示されれば成功です。
カーソルをあてた場合も文字色が緑になるのを確認しましょう。
まとめ
- Reactの環境でSassを使うためには、sassをインストールする必要がある。
- node-sassパッケージは非推奨であるため、使わないようにする。
- CSSの弱み(構造化(ネスト化)できない, コード全体における共通部分をまとめておけない..など)を解消し、より効率的にコードを書けるようにしたのがSassである。
- Sassを活用したスタイリング方法としては、styled-components<React向けのCSS-in-JSライブラリ>, 外部の.scssファイルから読み込む, CSS Modules…などが挙げられる。
コメント