AngularでBootstrap(scss)を使いたい

環境

• Angular 8.2
• Bootstrap 4.3

AngularのComponent内でbootstrapのmixinを使用したくなってググり始めた

.hoge {
  @include media-breakpoint-down(xs) {
    text-align: left;
    ..
  } 
}

これとかこれとか見れば分かるけど、

1. angular.jsonのstylesとscriptsに記載
2. 1で読み込んだスタイルシートの中でimport
3. 使いたいスタイルシートの中でimport

などの方法がある

僕の環境では1がすでに実装済みだった

それはそのはず、普通にクラス名にd-flexとかmx-0とか書いて使ってるからね

でもね、上述のinclude文のエラーが消えないんだ！

なんでだなんでだ…調べても調べても同じ内容の記事ばかりが出てきやがる…！！

結論

angular.jsonで読み込んでたのはただのcssファイルなんだ

includeで呼び出すminxinはcssじゃなくてscssで書かれてるんだ

つまりbootstrap.cssじゃなくてbootstrap.scssを引いてこなきゃいけないんだ！！

3の方法で試したところ
Angularさんから無事OKが出た！

@import "~bootstrap/scss/bootstrap";
..
.hoge {
  @include media-breakpoint-down(xs) {
    text-align: left;
    ..
  } 
}

解決！

ちなみにangular.jsonのstylesにbootstrap.scssを記載しても読み込んでくれなかった