SCSS 变量在转译后不起作用

问：

我想在我的 SCSS 文件中使用 SASS 变量，如下所示：

$divCrossColor:green;

#divCross {
    z-index:1000;
    color: $divCrossColor;
    position: absolute;
    height:70vh;
    top:50%;
    left:50%;
    margin-top:-12px;
    margin-left:-13px;
}

此代码被转译为 css，如下所示：

#divCross {
    z-index: 1000;
    color: green;
    position: absolute;
    height: 70vh;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -13px;
}

当我重新加载网页时 - 清除缓存 （cntl + shift + r） 后 - css 没有出现。范围是正确的。请注意，当我对颜色进行硬编码而不是使用变量时，scss 被转译为 css，当我加载网页时，css 正确显示。$cratching我的脑袋。此外，我在尝试使用 @extend 或 @mixin/@include 等@rules时也遇到了同样的问题。我正在使用 chrome，但使用 edge 得到相同的结果。在开发人员工具中找不到任何问题。