无法编译我的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编译阶段运行代码？