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

最後に

ここまで読んで頂き、有り難う御座います。

プログラミングを学習している方やこれから始めようと考えている方にお知らせです。

⇩⇩⇩⇩⇩⇩

独学で学習を続けても中々、理解が定着しない..
エラーが出てしまい、想定した結果が得られない…
フリーランスとしてデビューしたいが何からやったらいいかわからない…

などの悩みがある方必見！

実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。

話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。
オンラインで利用できるため、隙間時間で学習ができる。
質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
入会金不要で、あわないなと思ったらいつでも退会が可能。
実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる