[React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり)

Sassは、今では多くの開発の現場で導入されているため、キャッチアップしている方も多いかと思います。ただ、言語や環境ごとに導入方法が異なることもあり、私自身も初めて使う時には、中々書いたスタイルが反映されず、困った経験があります。。。

そういった経験も踏まえて、本記事では、React.jsの環境でSassを使用する方法についてご紹介します。現在のReactのバージョンですと、これまでの方法が非推奨となっているので、これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっております。

以下、本記事を通して得られる情報になります。

React.jsの環境準備 : 別記事紹介
sassパッケージのインストール
React + Sass : サンプルコード(検証用)

React.jsの環境準備
Sassを使うための準備
サンプルコード
1. フォルダの構成
2. コードを修正・追加
まとめ

React.jsの環境準備

Reactの開発環境構築方法(Windows & Mac)は、以下の記事で解説しております。

React + JavaScript - 開発環境構築方法(Windows & Mac)

これからReactの学習を始めていかれる方必見！本記事では、WindowsもしくはMacのPC上にReact + JavaScriptの開発環境構築をする方法についてご紹介しております。Node.jsの準備から動作の確認までまとめてますので参考になれば嬉しいです。

本記事では、「react-sass」という名前で新規のアプリケーションを作成しております。

Sassを使うための準備

ReactでSassを使うためには、「sass」というパッケージをアプリフォルダ内にインストールしてあげる必要があります。まずは、cdコマンドで「react-sass」フォルダへ移動しましょう。

cd react-sass
npm install sass

以下、実行例になります。(Windowsになりますが、Macでもコマンド実行後の動作は同じです。)

他の記事などをみると、「node-sass」をインストールするように書いてありますが、「node-sass」は公式で非推奨になっております。かつ、Reactの最新バージョン下で「node-sass」をインストールしたところでSassは使えませんのでご注意ください。(検証済み)

サンプルコード

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…などが挙げられる。