Bootstrap in rails app works only with .scss

I am currently learning Rails and working on a simple SocialMedia/Blog app. I am at a point where I have a basic view set up and am attempting to apply BootStrap CSS to it.

I followed the following steps in attempting to apply BootStrap to my application:

1.) added gem 'bootstrap-sass' into gemfile and ran 'bundle install'

2.) added '*=require bootstrap' to application.css

3.) added '//= require bootstrap' to application.js

4.) added:

<div class="container">
   <%= yield %>
 </div>

However when I would open the app, I got an error stating

couldn't find file 'bootstrap' with type 'text/css'

It would highlight the line "*=require bootstrap"

However, when I changed the extension to application.css.scss and added an @import statement as below, it worked with BootStrap applied

application.css.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 bootstrap
*= require_self
*/
@import "bootstrap";

So 2 questions...
1.) Why does my app require .scss and @import in order for BootStrap to work ?

2.) why does my "=require bootstrap" need to be "=require_bootstrap"?

THANKS!!