css - SASS 変数のコンパイルに失敗しました

Question

これが私のSassコードです

@charset "UTF-8";
$primary-color : #000000;
.cl_primary {
    background: $primary-color !important;
    color:white !important;
    border-color:$primary-color !important;
}
.cl_primary:hover {
    background: #ffffff !important;
    color:$primary-color !important;
}

そして、それが私のtheme.liquidにインポートした方法です

{{ 'style.scss.css' | asset_url | stylesheet_tag }}

ここで、検査時にエラーが発生しました

.cl_primary {
    background: $primary-color !important;
    color: white !important;
    border-color: $primary-color !important;
}

黄色の警告「無効なプロパティ値」あり。Shopify が SASS コンパイル段階でコードを実行していない理由を誰でも理解できますか?