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

npmのサムネイル画像 以下の構成をコンパイルしようとしたときに

├ 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」に変換して再度コンパイルしたら無事成功。なるほど。

続きを読む