ステップ1: プロジェクトの作成 まず、Reactプロジェクトを作成します。以下のコマンドを使用して、新しいReactプロジェクトを作成できます。
npx create-react-app my-appこのコマンドは、"my-app"という名前の新しいReactプロジェクトを作成します。
ステップ2: Sassのインストール 次に、Sassをプロジェクトに追加するために必要なパッケージをインストールします。以下のコマンドを使用して、必要なパッケージをインストールできます。
npm install node-sassこのコマンドは、node-sassパッケージをインストールします。
ステップ3: Sassファイルの作成 Sassファイルを作成しましょう。Reactプロジェクトのsrcディレクトリ内に、新しいファイル「styles.scss」を作成します。
ステップ4: Sassのコンパイル SassファイルをCSSにコンパイルする必要があります。これを行うには、Reactプロジェクトの「package.json」ファイルを編集します。
以下のように、scriptsセクションに「build-css」という新しいスクリプトを追加します。
"scripts": {
...
"build-css": "node-sass src/styles.scss -o src"
...
}ステップ5: Sassの適用 最後に、SassをReactプロジェクトで使用するために必要な手順を実行します。
以下のコマンドを使用して、Sassファイルをコンパイルします。
npm run build-cssこれにより、Sassファイルがコンパイルされ、CSSファイルが生成されます。
ReactコンポーネントでSassを使用するには、次のようにimport文を追加します。
import './styles.scss';これで、ReactプロジェクトでSassを使用する準備が整いました。
以上がReactにSassを追加する手順です。これにより、Sassを使用してスタイル付けされたコンポーネントを作成できます。