Sassスタイルシートの追加

注：この機能は、react-scripts@2.0.0以降で使用できます。

一般的に、異なるコンポーネント間で同じCSSクラスを再利用しないことをお勧めします。たとえば、<AcceptButton>および<RejectButton>コンポーネントで.Button CSSクラスを使用する代わりに、独自の.Buttonスタイルを持つ<Button>コンポーネントを作成し、<AcceptButton>と<RejectButton>の両方がレンダリングできることをお勧めします（ただし、継承はしません）。

このルールに従うと、多くの場合、mixinやネストなどの機能がコンポーネントの構成に置き換えられるため、CSSプリプロセッサの有用性が低下します。ただし、必要であればCSSプリプロセッサを統合できます。

Sassを使用するには、まずsassをインストールします。

$ npm install sass
# or
$ yarn add sass

これで、src/App.cssをsrc/App.scssに名前変更し、src/App.jsを更新してsrc/App.scssをインポートできます。このファイルとその他のファイルは、拡張子が.scssまたは.sassでインポートされている場合、自動的にコンパイルされます。

Sassファイル間で変数を共有するには、Sassの@useルールを使用できます。たとえば、src/App.scssおよびその他のコンポーネントスタイルファイルには、変数定義を含む@use "./shared.scss";を含めることができます。

これにより、次のようなインポートが可能になります。

@use 'styles/_colors.scss'; // assuming a styles directory under src/
@use '~nprogress/nprogress'; // loading a css file from the nprogress node module

注：上記のように、パスに~をプレフィックスとして付けることで、node_modulesからモジュールを解決できます。

sassはSASS_PATH変数もサポートしています。

指定したパスを基準としたインポートを使用するには、.envファイルをプロジェクトルートに追加し、SASS_PATH環境変数に指定されたパスを指定します。複数のディレクトリを指定するには、path1:path2:path3のようにコロンで区切ってSASS_PATHに追加します。

注：Windowsオペレーティングシステムでは、パスをセミコロンで区切ります。

SASS_PATH=path1;path2;path3

ヒント：CSSモジュールでもこの機能を使用できます！

注：Flowを使用している場合は、.flowconfigでmodule.file_ext設定をオーバーライドして、.sassまたは.scssファイルを認識するようにします。また、.js、.jsx、.mjs、.jsonファイルのmodule.file_extのデフォルト設定を含める必要があります。

[options]
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.mjs
module.file_ext=.json
module.file_ext=.sass
module.file_ext=.scss

注：LibSassとその上に構築されたパッケージ（Node Sassを含む）は非推奨です。Node Sassのユーザーは、package.jsonファイルでnode-sassをsassに置き換えるか、次のコマンドを実行することで、Dart Sassに移行できます。

$ npm uninstall node-sass
$ npm install sass
# or
$ yarn remove node-sass
$ yarn add sass