Sassを使用したReactのスタイリング

❮ 前次 ❯

Sassとは

SassはCSSプリプロセッサです。

Sassファイルはサーバー上で実行され、CSSをブラウザーに送信します。

Sassの詳細については、 Sassチュートリアルをご覧ください。

Sassを使用できますか？

プロジェクトでを使用する場合create-react-appは、ReactプロジェクトにSassを簡単にインストールして使用できます。

ターミナルで次のコマンドを実行して、Sassをインストールします。

>npm i sass

これで、プロジェクトにSassファイルを含める準備ができました。

Sassファイルを作成する

CSSファイルを作成するのと同じ方法でSassファイルを作成しますが、Sassファイルのファイル拡張子は.scss

Sassファイルでは、変数やその他のSass関数を使用できます。

my-sass.scss：

テキストの色を定義する変数を作成します。

$myColor: red;

h1 {
  color: $myColor;
}

CSSファイルをインポートしたのと同じ方法でSassファイルをインポートします。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));