React Bootstrap でトースト通知に必要な CSS のみをインポートする方法

事象

React Bootstrap を使用してアプリケーションにトースト通知を実装する際、全ての Bootstrap スタイルを以下のコマンドでインポートすると、トースト以外のコンポーネントにもスタイルが適用され、意図しないデザインの変更が発生する可能性があります。

import 'bootstrap/dist/css/bootstrap.min.css';

この問題を解決し、トースト通知機能に必要な CSS のみを選択的にインポートする方法をご紹介します。

対処法

SCSS を使用して、トーストを実装するために最低限必要な CSS をインポートします。これにより、アプリケーションの他の部分に影響を与えることなく、トースト通知のスタイルを適用できます。

style.scss

// Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";
 
// Layout & components
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/close";
@import "node_modules/bootstrap/scss/toasts";

警告
下記のようなエラーが発生する場合には@import "node_modules/bootstrap/scss/maps"; を@node_modules/bootstrap/scss/utilities";の前に配置する必要があります。この手順は、Bootstrap v5.2.0以降で導入された新しい_maps.scssファイルが関連しています。

[plugin:vite:css] [sass] Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_utilities.scss 142:15  @import
  your/path/to/style.scss 21:9  root stylesheet

参照

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！