ReactでSassを使いたい 使用エディタ ：Atom

Question

下記のサイトを利用しReactファイル上でもSassを使いたく導入してみたものの
startコマンドでReact自体は立ち上がるのですが、
Module not found: Can't resolve　"./style.css"とエラーが出てしまいします

この"resolve"は何がどう解決できていないかがわからなく
解決策をお聞きしたく質問させていただきました。
よろしくお願い致します。

参考サイトURL
https://hatolabo.com/programming/react%E3%82%A2%E3%83%97%E3%83%AA%E3%81%ABsass%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86

以下試したこと
①
<./src/App.jsx>
import "./style.css";
に変更してみましたが同様のエラーでした
②
<./src/App.jsx>
import "./style/style.css";
に変更してみましたが同様のエラーでした
③
<./src/App.jsx>
import "./style.scss";
に変更してみましたが同様のエラーでした
④
<./src/App.jsx>
import "./style/style.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/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/style/style.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
というエラーが出てしまいました

環境構築ツール：create react app

ファイル階層構造(省略)
src
↓
style　/　style.scss

App.jsx

Answer 1

.scss 拡張子のファイルを.css拡張子で読み込もうとしていることが原因ではないでしょうか。

リンクしていただいたブログの

create-react-app2以降で作成した場合

直下にあるコードのように、.scssでインポートを行うと解決すると思います。

Comments

[ShojiroAbe]

お返事ありがとうございます。
試しに
import "./style.scss"にしてみたところ同様のエラーが出てしまいました
すいません…

[itepechi]

`import "./style/style.scss"`ではなく`import "./style.scss"`でインポートを行ったと言うことでしょうか？

`style.scss`が`App.jsx`と同じ階層に存在しない場合、`import "./style.scss"`では正しくインポートを行うことができません。

[ShojiroAbe]

お返事ありがとうございます

試したことを一部変更、追加しました
一応一通り、何パターンか試してみたのですが、どれも何かしらのエラーが出てしまいました。
申し訳ありません

[itepechi]

④の方法で合っています。発生している新しいエラーを解決したいのですが、`npm why node-sass`のコマンドを打った場合には何が表示されますか？

[ShojiroAbe]

Usage: npm <command>

where <command> is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, fund, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami

npm <command> -h quick help on <command>
npm -l display full usage info
npm help <term> search for help on <term>
npm help npm involved overview

Specify configs in the ini-formatted file:
/Users/abeshoujirou/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.14.8 /usr/local/lib/node_modules/npm

が出ました

[itepechi]

お使いのnpm@6だと`npm why ...`ではなく`npm explain ...`と打つ必要がありますね…。お手数をおかけしますが、`npm explain node-sass`と入力してもう一度表示を教えていただけないでしょうか。

[itepechi]

失礼しました、先ほどのコメントには誤りがあり、`explain`コマンドはnpm@7からの実装でした。

当該コマンドが使えないため、代わりに`package.json`ファイルの`dependencies`あるいは`devDependencies`に`node-sass`が追加されていないか、もし追加されている場合は右側にあるバージョンの数字も加えて教えていただけないでしょうか。

[ShojiroAbe]

返事が遅くなり申し訳ありません

下記のURLのパッケージをインストールしましたら無事コンパイルでき
読み込みもできました
https://qiita.com/chieeeeno/items/1dda5c47d4f1e36408e8

おそらくそれぞれのパッケージの用途見誤っっていた可能性があったのかもしれません
お手数をおかけいたしました
ありがとうございます