エラー：NodeSassバージョン5.0.0は^ 4.0.0と互換性がありません

Question 1

次のコマンドを使用して、空のReactプロジェクトを作成しました：npx create-react-appon npmv7.0.7およびNodev15.0.1

インストール済み：

React v17.0.1、
node-sass v5.0.0、

次に、空白の.scssファイルをAppコンポーネントにインポートしようとしました。

App.js

import './App.scss'

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

エラーをスローします：

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

package.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
 ...
 
  }
}

Question 2

TL; DR

npm uninstall node-sass
npm install node-sass@4.14.1

Edit2：sass- loaderv10.0.5で修正されました。問題は、それをプロジェクトの依存関係としてではなく、依存関係の依存関係として使用している可能性があることです。CRAは固定バージョンを使用し、angular-cliはnode-sassv4などにロックします。
今のところの推奨事項は次のとおりです。node-sassのみをインストールする場合は、以下の回避策（およびメモ）を確認してください。空のプロジェクトで作業していて、Webpack構成を管理できる場合（プロジェクトのスキャフォールディングにCRAまたはCLIを使用しない場合）、最新のsass-loaderをインストールします。

編集：このエラーはsass-loaderから発生します。node-sass @latestはv5.0.0であり、sass-loaderは^ 4.0.0を想定しているため、semverの不一致があります。
リポジトリに未解決の問題があり、関連する修正を確認する必要があります。それまでは、以下の解決策を参照してください。

回避策：node-sass 5.0.0はまだインストールしないでください（メジャーバージョンはバンプされたばかりです）。

node-sassをアンインストールします

npm uninstall node-sass

次に、最新バージョン（5.0より前）をインストールします

npm install node-sass@4.14.1

注：LibSass（したがってnode-sassも）は非推奨であり、dart-sassが推奨される実装です。代わりに、純粋なJavaScriptにコンパイルされたdart-sassのノード配布であるを使用できsassます。ただし、注意が必要です。

このアプローチの使用には注意してください。React-scriptsはsass-loaderv8を使用します。これは、sassよりもnode-sassを優先します（node-sassでサポートされていない構文があります）。両方がインストールされていて、ユーザーがsassを使用している場合、cssのコンパイルでエラーが発生する可能性があります

Question 3

node-sassをアンインストールします

npm uninstall node-sass

次の方法でsassを使用します。

npm install -g sass
npm install --save-dev sass