Rails6で、Bootstrap3から4に変更したらscssファイルで@import "bootstrap"できなくなった。

Question

前提・実現したいこと

Rails6で、Bootstrap3から4に変更したらscssファイルで@import "bootstrap"がエラーとなった。
自前scssファイルにBootstrap4 の変数やクラスを読み込んで使いたい。
例）カラー　$text-danger　など
例）クラス　@extend .is-invalid;　など

発生している問題・エラーメッセージ

scssファイル(custom.scss)の先頭に
@import 'bootstrap';
と記述すると

File to import not found or unreadable: bootstrap.
とエラーメッセージがでる。

bootstrap3の時はエラーは出なかった。

該当のソースコード

@import 'bootstrap';
.
.
.
.field_with_errors {
    .form-control {
        @extend .is-invalid;
    }
}

試したこと

Rails6に入れているBootstrapを3から4に上げました。自前のSCSSは、custom.scssファイルとしてapp/assets/stylesheets内に置いてあり、それ自体は正常に使えています。
同じディレクトリにapplication.scssがあり、@import "custom";とだけ記述してあります。（ここに@import 'bootstrap';と記述しても同様のエラーになります。）

bootstrap4の導入は、
https://qiita.com/whitia/items/34de15b72946f7f3b773
を参考にして行いました。
正常に動いています。

補足情報（FW/ツールのバージョンなど）

rails Rails 6.0.2.2
bootstrap 4.4.1
jquery: 3.4.1

bootstrapとjqueryは、Webpackerを利用してインストールしました。

Comments

[no1knows]

Bootstrap4の設定がうまくいっていないような気がするのですが、きちんと反映されているのでしょうか？

[kohdohg]

custom.scssに記述したものは、反映されているのですが、
Bootstrap4から、変数（$....）と@extendでの持ち込みができません。
railsチュートリアル(ver6版)で学習中なのですが、自力でBootstrapを3->4にしたら、おかしくなりました。

[no1knows]

> Rails6環境で、自前scssにBootstrap4 の変数やクラスを読み込んで使いたい。
タイトルが上記のようになっていますが、本来は、「Bootstrap3->4にしたら反映されなくなった」とかではないでしょうか？

[kohdohg]

説明を全面的に書き直してみました。

Answer 1

1.app/assets/stylesheetsにあった、自前のscssファイル「custom.scss」をapp/javascript/packsに移す。
2.app/javascript/src/application.scss” に「@import ‘custom’;」を追記。
3.custom.scssの先頭に、「@import ‘~bootstrap/scss/bootstrap’;」を追記。

これで、なんとか動くようになりました。