[Rails][bootstrap]css→SCSSへ変更する方法


Bootstrapのロジック整理のため投稿です。
CSS→SCSS(Sass)への変更方法についてまとめていきます。

rails new

の直後では、デフォルトでapp/assets/stylesheets/application.cssが読み込まれる仕様になっています。

そこで手順は、以下の流れになりそうです。

①app/assets/stylesheets/application.css を削除
②app/assets/stylesheets/application.scssを作成
③Gemfileにbootstrapを追加→bundle install
④app/assets/stylesheets/application.scssにインポート

具体的に見て行きましょう!

①app/assets/stylesheets/application.css を削除

$ rm app/assets/stylesheets/application.css

②app/assets/stylesheets/application.scssを作成

③Gemfileにbootstrapを追加→bundle install

Gemfile.
  gem 'bootstrap'
$ bundle install

④app/assets/stylesheets/application.scssにインポート

application.scss
@import "bootstrap";