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

2021年5月22日

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  

関連ページ

Webpack を使って Bootstrap 5 をインストール(バンドル)

Bootstrap Issue ページ(2021年5月22日時点では Open のステータス)
Sass: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0 #34051

参考ページ