React で Sass を使用する方法

Sass は、React プロジェクトですぐに使用できる CSS の改良版です。

Sass (構文的に素晴らしいスタイル シート) は、CSS をより強力にする追加機能を備えた CSS の拡張機能です。 Sass の最も優れた点は CSS との互換性です。つまり、React などの JavaScript フレームワークを使用した Web 開発プロジェクトで Sass を使用できます。

ただし、バニラ CSS とは異なり、Sass を使用するには少しセットアップが必要です。 シンプルな React.js プロジェクトを設定し、Sass をそれに統合することで、これがどのように機能するかを確認してください。

他の CSS プロセッサと同様に、Sass は React によってネイティブにサポートされていません。 React で Sass を使用するには、yarn や npm などのパッケージ マネージャーを介してサードパーティの依存関係をインストールする必要があります。

次のコマンドを実行すると、npm または Yarn がローカル マシンにインストールされているかどうかを確認できます。npm --バージョンまたは糸 --バージョン 。 ターミナルにバージョン番号が表示されない場合は、まず npm または Yarn をインストールします。

このガイドに従うには、create-react-app を使用して単純な React.js アプリをセットアップできます。

まず、コマンド ラインを使用して、React プロジェクトを作成するフォルダーに移動します。次に、次を実行します。npx create-react-app <アプリ名> 。 プロセスが完了したら、次を使用してアプリのディレクトリに入ります。cd <アプリ名> 。 次のコンテンツをApp.jsスターターとしてのファイル:

基本的な React プロジェクトをセットアップしたら、Sass を統合します。

Sass は npm または Yarn 経由でインストールできます。 実行して糸経由でインストールします糸追加サスまたは、npm を使用する場合は、次を実行します。npmインストールsass 。 パッケージマネージャーは、最新バージョンの Sass をプロジェクトの依存関係のリストに追加します。パッケージ.jsonファイル。

プロジェクトのフォルダーで、App.css とindex.css の名前をそれぞれ App.scss とindex.scss に変更します。

これらのファイルの名前を変更した後、次のように、新しいファイル拡張子に一致するように App.js ファイルとindex.js ファイルのインポートを更新する必要があります。

これ以降、作成するスタイル ファイルには .scss 拡張子を使用する必要があります。

Sass の最も重要な利点の 1 つは、変数とミックスインを使用してクリーンで再利用可能なスタイルを作成できることです。 React で同じことをどのように実行できるかは明らかではないかもしれませんが、プレーンな JavaScript と HTML で書かれたプロジェクトで Sass を使用するのとそれほど違いはありません。

まず、新規作成しますスタイルフォルダー内の送信元フォルダ。 Styles フォルダーに、次の 2 つのファイルを作成します。_変数.scssそして_mixins.scss 。 次のルールを _variables.scss に追加します。

そして、以下を _mixins.scss に追加します。

次に、次のように App.scss に変数とミックスインをインポートします。

App.scss ファイルで変数とミックスインを使用します。

これが、React で変数とミックスインを使用する方法です。 ミックスインと変数に加えて、関数など、Sass の他の優れた機能もすべて使用できます。 制限はありません。

Sass は CSS の上にさらに多くの機能を提供します。これはまさに再利用可能な CSS コードを作成するために必要なものです。

React で Sass の使用を開始するには、npm または Yarn 経由で sass パッケージをインストールし、CSS ファイルを .scss または .sass に更新してから、新しいファイル拡張子を使用するようにインポートを更新します。 その後、React で SCSS の記述を開始できます。

Alvin Wanjala は、MakeUseOf の Android 担当シニア ライターであり、ソフトウェア開発者です。 2013 年に初めてデバイスを購入して以来、エコシステムに夢中になった熱心な Android ユーザーとして、彼はユーザーがデバイスを最大限に活用できるよう支援することに重点を置いています。 しかし、毎日複数のプラットフォームを使用するテクノロジー愛好家である彼は、iOS、Mac、ソーシャル メディア、その他消費者向けテクノロジーの幅広いトピックもカバーしています。Alvin は、2018 年に個人のテクノロジー ブログで執筆を開始し、2019 年には TechTrendsKE で専門的に執筆を開始しました。彼は一般的なテクノロジー ニュースと製品レビューをカバーしました。 それ以来、彼の作品は XDA Developers や他のいくつかのテクノロジー Web サイトで紹介されています。執筆とは別に、ソフトウェア開発に重点を置いて IT の第 2 学位を取得中です。