RailsでWebpackerを使おうとすると、font-awesomeやCSSが反映されない

実現したいこと・エラーメッセージ

今Ruby on Railsでアプリを作成しており、SprocketsからWebpackerに移行しようとしています。
しかし、コンソールに以下のようなエラー文が出てしまい、fontawesomeやCSSが反映されないので、解決法を教えていただけますと幸いです。

▼fontawesomeのエラー文

Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
^
      File to import not found or unreadable: ~@fortawesome/fontawesome-free/scss/fontawesome.
      in /Users/kuma/blog/app/javascript/packs/application.scss (line 1, column 1)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/packs/application.scss (application.scss:19)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.scss (application.scss:2)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

▼CSSのエラー文

Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "../src/stylesheets/*";
^
      File to import not found or unreadable: ../src/stylesheets/*.
      in /Users/kuma/blog/app/javascript/packs/application.scss (line 1, column 1)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/packs/application.scss (application.scss:19)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.scss (application.scss:2)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

該当のソースコード

▼app/javascript/packs/application.js

js
1require("@rails/ujs").start()
2require("turbolinks").start()
3require("@rails/activestorage").start()
4require("channels")
5
6import '../src/js/application.js'
7import "@fortawesome/fontawesome-free/js/all"
8import './application.scss'
9const images = require.context('../images', true)

▼app/javascript/packs/application.scss

js
1@import "~@fortawesome/fontawesome-free/scss/fontawesome";
2@import "../src/stylesheets/*";

▼app/views/layouts/application.html.haml

js
1!!!
2%html
3  %head
4    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
5    %title Blog
6    = csrf_meta_tags
7    = csp_meta_tag
8    = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
9    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
10  %body
11    = render 'layouts/header'
12    = render 'layouts/notifications'
13    = yield