Bootstrap 5.2.0 にアップデートすると Dart Sass のトランスパイルで $prefix が Undefined variable エラーになる

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー Scss

現象

表題の通り、 Bootstrap を 5.1.3 から 5.2.0 にアップデートして Dart Sass のトランスパイルを実行すると、 $prefix が Undefined variable エラーになる現象に遭遇したのでメモ。

Error: node_modules\bootstrap\scss\_functions.scss
Error: Undefined variable.
   ╷
47 │     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
   │                          ^^^^^^^
   ╵
  node_modules\bootstrap\scss\_functions.scss 47:26                                             rgba-css-var()

解決策

今回は依存先の自作パッケージが 5.1.3 前提で _variables.scss を独自に書き換えていたので、本体のプロジェクトの Bootstrap が 5.2.0 に上がって不一致を起こしたのが原因でした。

自作パッケージのコードを 5.2.0 用に修正することで対処しました。

なお、他にも Bootstrap のファイルを読み込ませる Scssファイル で

@import "../node_modules/bootstrap/scss/maps";

を追加するなどの対処も必要なため、併せて対応しました。

参考

Bootstrap Bootstrap5

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧