I'm trying to use bootstrap with webpack installed, how do I fix this AssetNotFound error?

I have some bootstrap styling features in my app that haven't been working, and I think it was because I also have webpack installed. So I followed the instructions from a youtube video to figure out how to get the bootstrap styling working. But I got this AssetNotFound error on my application.html.erb file related to the stylesheet_link_tag on Line 12 below

Sprockets::Rails::Helper::AssetNotFound
The asset "application.css" is not present in the asset pipeline

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

I'm confused because I do have application.css in my app folder. For this error, I had it in app/javascript/packs.

I moved it to app/assets/stylesheets and got a different error (I also moved application.scss with it, I originally had application.scss, and I made application.css after getting the AssetNotFound Error the first time, but it didn't change when I added an application.css with the same code)

When I had application.css in the assets/stylesheet folder, I get the error below tracing to line 16 (the error was raised from the same line 12 I referenced above in application.html.erb)

SassC::SyntaxError in Places#show    
Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
        on line 16:1 of app/assets/stylesheets/application.scss

14  *= require_self
15  */
16  @import "~bootstrap/scss/bootstrap";
17  @import "master";