cssの!importantが効かない

Question

Vue.jsにて、SCSSでbodyのbackground-colorを紺色に指定しており、
それを使用している画面の1つをbackground-colorを♯fffに指定したいのですが、

body{
background-color:#fff !important;
}

にしても紺色のままです。

こちらの解決方法がわかる方、ご教授いただけますと幸いです。

≪SCSS≫
body {
background-color: $bodyColor;
}

≪_variable.scss≫
$bodyColor: #1c2c4d;

Answer 1

idで指定されてようが、インラインで書かれてようがもっとも優先されるのは!importantです。
なので初歩的なミスな気がしてます。（スペル間違い、スペースが全角など）

Answer 2

ブラウザの開発者ツールからbodyタグのcssがどのようにあたっているか確認してみてください
たとえばchromeであれば要素選択状態でComputedタブを見てみるとどこで定義した何が当たっていて、どの定義が反映されているかなど見てとれるかと思います。
※以下例であれば、main.cssの7行目の定義が反映されており、他定義は無視されているなど

この結果から、「なぜ」反映されないかがわかるかと思いますがいかがでしょうか？