Bootstrap 5 のビルドで DEPRECATION WARNING: Using / for division is deprecated

2021年5月22日

【追記】バージョン 5.1.3 では sass での除算の代わりに乗算を使用する（例えば 1/4 にするには 0.25 を掛ける）ように変更されて、 Warning は出ないように改善されています。

npm パッケージを使って Bootstrap 5 をインストールしてビルドする際に sass のパッケージのバージョンにより以下のような Warning が出てしまうようです。

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

$ npm run build  

> bs5@1.0.0 build
> webpack --mode production

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
253 │   1: $spacer / 4,
    │      ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 253:6  @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9    @import
    src/custom.scss 29:9                               root stylesheet

・・・中略（上記と同様の警告が出力される）・・・

//繰り返しの警告が省略される旨のメッセージ（sass パッケージバージョン 1.34.0 の場合）
WARNING: 71 repetitive deprecation warnings omitted.

・・・中略・・・

webpack 5.37.1 compiled successfully in 4294 ms

警告の内容からすると、Dart Sass では「/」を使った記述は非推奨になっていて、上記の場合、_variables.scss の 253 行目の $spacer / 4 を math.div($spacer, 4) に書き換えれば良さそうですが、Bootstrap の Sass ファイルを変更するのは避けたいので（それに多数あり過ぎる）、それは断念。

sass のパッケージのバージョンが 1.33.0 では「WARNING: 71 repetitive deprecation warnings omitted.」のように繰り返しの警告は省略されず、すべて（上記の場合だと71回）表示されていたので、1.34.0 では改善されたようです。

Warning を止める（一時的な解決策）

一時的な解決策としては sass のパッケージを 1.34.0 から 1.32.13 にダウングレードすれば警告は表示されないようになります。

//sass のパッケージ（1.33.0 や 1.34.0）をアンインストール
$ npm un sass 

//バージョン（1.32.13）を指定してインストール   
$ npm i -D sass@1.32.13

Web Design Leaves

Bootstrap 5 のビルドで DEPRECATION WARNING: Using / for division is deprecated

Warning を止める（一時的な解決策）