SCSSコンパイル時に「Incompatible units rem and px」エラー【#np2020】

以下の構成をコンパイルしようとしたときに

├ resouces
│    ├ _variables.scss
│    └ app.scss
└ public
└ app.css 

次の様なエラーが出ました。

$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
^
Incompatible units rem and px.

最初何のことだかさっぱりわからなかったのですが、これ要するに、

数式に含まれている要素の単位は同じじゃないとダメだよ

ということなんですね。


ソースを見返してみると「_variables.scss」の中で「$font-size-base 」が「px」で指定されていましたが、ここはBootstrap4が使っている部分なので「rem」で指定しないといけません。

というわけで「14px」を「0.9rem」に変換して再度コンパイルしたら無事成功。なるほど。