PHP laravel npm run devでの実行エラーについて

Question

phpの基礎学習を終え laravel を使用してマッチングアプリを開発中です。

お忙しい中お手数をおかけしますが、お分かりの方がいたらご教授をお願いできないでしょうか？

エラーについてですが　scssを記入後それを反映させるために
npm run dev 実行しかし、実行後下記のエラーが表示します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

$ npm run dev

@ dev /Applications/MAMP/htdocs/techpit-match
npm run development

@ development /Applications/MAMP/htdocs/techpit-match
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

ERROR Failed to compile with 2 errors 9:35:03 PM

error in ./resources/sass/app.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "}".
╷
20 │ }
│ ^
╵
resources/sass/_top.scss 20:4 @import
/Applications/MAMP/htdocs/techpit-match/resources/sass/app.scss 20:9 root stylesheet
at /Applications/MAMP/htdocs/techpit-match/node_modules/webpack/lib/NormalModule.js:316:20
at /Applications/MAMP/htdocs/techpit-match/node_modules/loader-runner/lib/LoaderRunner.js:367:11
・
・
・
at _Future__propagateToListeners_handleError.call$0 (/Applications/MAMP/htdocs/techpit-match/node_modules/sass/sass.dart.js:24337:40)
at Object._Future__propagateToListeners (/Applications/MAMP/htdocs/techpit-match/node_modules/sass/sass.dart.js:3497:88)

error in ./resources/sass/app.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "}".
╷
20 │ }
│ ^
╵
resources/sass/_top.scss 20:4 @import
/Applications/MAMP/htdocs/techpit-match/resources/sass/app.scss 20:9 root stylesheet

@ ./resources/sass/app.scss 2:14-253

 Asset      Size   Chunks             Chunk Names

/js/app.js 1.07 MiB /js/app [emitted] /js/app

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "}".
╷
20 │ }
│ ^
╵
resources/sass/_top.scss 20:4 @import
/Applications/MAMP/htdocs/techpit-match/resources/sass/app.scss 20:9 root stylesheet
at /Applications/MAMP/htdocs/techpit-match/node_modules/webpack/lib/NormalModule.js:316:20
at /Applications/MAMP/htdocs/techpit-match/node_modules/loader-runner/lib/LoaderRunner.js:367:11
・
・
・
at _Future__propagateToListeners_handleError.call$0 (/Applications/MAMP/htdocs/techpit-match/node_modules/sass/sass.dart.js:24337:40)
at Object._Future__propagateToListeners (/Applications/MAMP/htdocs/techpit-match/node_modules/sass/sass.dart.js:3497:88)
@ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sas
s-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "}".
╷
20 │ }
│ ^
╵
resources/sass/_top.scss 20:4 @import
/Applications/MAMP/htdocs/techpit-match/resources/sass/app.scss 20:9 root stylesheet
@ ./resources/sass/app.scss 2:14-253
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/hasegawashin/.npm/_logs/2020-05-17T12_35_03_631Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: npm run development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/hasegawashin/.npm/_logs/2020-05-17T12_35_03_650Z-debug.log

試したこと

npm install -g npm

npm を再インストールを行ったが同じエラーが出てしまい分からない状態です。

大変お手数おかけしますが、よろしくお願いします。

Answer 1

ファイル中に何かしらの構文エラーがあるのでは？

Comments

[kyoya0819]

SCSSがないのでなんとも

[hasegawa1223]

app.scss ですが、下記の文になります。

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Nunito');

/* Variables */
@import 'variables';

$fa-font-path: "../webfonts";

/* Bootstrap */
@import '~bootstrap/scss/bootstrap';

/* FontAwesome */
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

/* pages */
@import "top";

[kyoya0819]

resources/sass/_top.scss
のどこかみたいです。

[hasegawa1223]

対応ありがとうございました。_top.scssに間違いありました。
この場合、質問分にapp.scssか_top.scssとメッセージが出ているのですが、そこから探していくという対応方法で問題解決に進めていけばいいんですかね　そこも教えていただけると助かります

[kyoya0819]

上からエラーコード絵を見ていくとそれらしきファイルパスがまず一つ出てきます。
「error in ./resources/sass/app.scss」
しかし、ここにはエラーがありません。

なので、そのまま下に見ていくと、
「resources/sass/_top.scss」という疑わしいファイルパスが出てきたため、お伝えしました。

自分は、半分はファイルの役割を識別する知識と、もう半分は勘で見つけました。

[hasegawa1223]

参考になりました。おかげさまで次の段階へ進んで学習することができそうです。
助かりました。
エラー解決とご教授ありがとうございます。