ReactプロジェクトにSCSSを追加する方法

概要

ReactプロジェクトでSCSS (Sassy CSS) を使用すると、変数やネスト、ミックスインなどの高度な機能を活用して、より効率的なスタイリングが可能になります。この記事では、Create React Appで構築されたプロジェクトにSCSSを追加する方法を解説します。

前提条件

• Reactの基本的な知識
• Node.jsとnpmまたはyarnがインストールされていること
• Create React Appでプロジェクトが作成されていること

SASSパッケージのインストール

まず、プロジェクトにSASSコンパイラをインストールする必要があります。以前はnode-sassが使用されていましたが、現在は非推奨となっているため、代わりにsassパッケージをインストールします。

npm

npm install sass --save-dev

yarn

yarn add sass

INFO

sassパッケージはDart Sassの実装で、現在の標準的なSASSコンパイラです。--save-devフラグは開発依存関係としてインストールすることを示します。

CSSファイルの変換

インストールが完了したら、既存のCSSファイルをSCSS形式に変換します：

1. ファイル拡張子を.cssから.scssに変更
2. 必要に応じてSCSSの機能（変数、ネスト、ミックスインなど）を追加

例：

• App.css → App.scss
• components/Button.css → components/Button.scss

SCSSファイルのインポート

ReactコンポーネントでSCSSファイルをインポートするには、相対パスを使用します：

import React from 'react';
import './App.scss'; // SCSSファイルのインポート

function App() {
  return (
    <div className="app">
      <h1>こんにちは、世界！</h1>
    </div>
  );
}

export default App;

SCSS機能の活用

SCSSの強力な機能を活用して、より効率的なスタイリングが可能です：

変数の使用

// _variables.scss（部分ファイル）
$primary-color: #007bff;
$font-stack: 'Helvetica Neue', sans-serif;
$spacing: 1rem;

ネスト構造

.navbar {
  background-color: $primary-color;
  
  ul {
    list-style: none;
    padding: 0;
    
    li {
      display: inline-block;
      margin-right: $spacing;
      
      a {
        color: white;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

ミックスインの作成

// _mixins.scss
@mixin center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

// ミックスインの使用
.container {
  @include center-content;
  
  @include responsive(768px) {
    flex-direction: column;
  }
}

部分ファイルのインポート

大規模なプロジェクトでは、スタイルを複数のファイルに分割して管理できます：

// main.scss
@import 'variables';
@import 'mixins';
@import 'components/button';
@import 'components/navbar';
@import 'layouts/header';

TIP

部分ファイル（partials）はアンダースコア（_）で始まる命名規則を使用します（例: _variables.scss）。これにより、これらのファイルは個別のCSSファイルにコンパイルされません。

高度な設定

デフォルトのCreate React Appの設定では不十分な場合、以下のオプションを検討できます：

• react-app-rewired: webpack設定を上書きするためのツール
• CRACO (Create React App Configuration Override): より簡単に設定をカスタマイズするためのツール

WARNING

これらのツールを使用すると設定が複雑になるため、本当に必要な場合のみ使用することを推奨します。ほとんどのプロジェクトでは標準のCreate React Appで十分です。

トラブルシューティング

スタイルが適用されない場合

1. ファイルパスが正しいか確認
2. コンポーネントのインポート文を確認
3. 開発サーバーを再起動

ビルドエラーが発生する場合

# キャッシュをクリアして再ビルド
npm start -- --reset-cache

まとめ

Create React AppプロジェクトにSCSSを追加するのは簡単です：

1. sassパッケージを開発依存関係としてインストール
2. CSSファイルをSCSS形式に変換
3. コンポーネントでSCSSファイルをインポート
4. SCSSの高度な機能を活用して効率的なスタイリングを実現

SCSSを使用することで、メンテナンス性の高いスタイルシートを作成し、Reactアプリケーションの見た目を効果的に制御できます。

参考リソース

• Sass公式ドキュメント
• Create React App公式ドキュメント
• Reactスタイリングガイド