解決したいこと

現在個人アプリを作成しており、bootstrap4を導入しデザインを反映させることはできましたが
webpackerでcssを読み込ませることができません。

webpackerやアセットパイプラインについてrails guidesを調べてみたりはしつつコードを書いてみましたが,
しばらく悩んでいるためお力をお借りしたいです。

やったこと

jquery bootstrap popper.jsをinstall

$ yarn add jquery bootstrap popper.js
yarn add v1.22.10
[1/4] ????  Resolving packages...
warning popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
[2/4] ????  Fetching packages...
[3/4] ????  Linking dependencies...
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] ????  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ bootstrap@4.6.0
├─ jquery@3.6.0
└─ popper.js@1.16.1
info All dependencies
├─ bootstrap@4.6.0
├─ jquery@3.6.0
└─ popper.js@1.16.1
✨  Done in 3.86s.

現在のファイル配置

app/assets:
  ├── stylesheet:
      └── application.scss
      └── custom.scss

app/javascript:
  ├── packs:
  │   └── application.js 
  └── src:
  │   └── application.scss
  └── stylesheets:
      └── application.css

ソースコード

assets/stylesheet/application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

javascript/packs/application.js

import 'bootstrap'
import '../src/application.scss'
import 'packs/application.css'
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

javascript/src/application.scss

@import '~bootstrap/scss/bootstrap';

javascript/stylesheets/application.css

@import '~bootstrap/scss/bootstrap';

views/layout/application.html.css

<!DOCTYPE html>
<html>
  <head>
    <title>TaskApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
  <% if flash[:notice] %>
    <p><%= flash[:notice] %></p>
  <% end %>
  <%= yield %>
  </body>
</html>

ファイルなどわかりづらい点を教えて頂ければすぐ追加情報を送るようにします。
レビューをよろしくお願いいたします。