Sass未定义变量，即使我先导入它们也是如此

Question

[当我尝试使用变量时，如果我首先在index.scss中导入变量，则会给我未定义的信息。有人可以帮我了解如何解决此问题。

//Var file

$main-color: red;
$black: black;
$white: white;
$green: #7DBB4F;
$grey: #323232;
$lightGrey: #EDEDED;

// styles.scss
@use './Variables/_variables.scss';
@use './0_base/base';
@use './1_layout/layout_index';
@use './2_pages/pages_index';
@use './3_components/components_index';

//where I try to use it

.hoverInputContainer{
    position: absolute;
    display:flex;
    justify-content: center;
    top: 70px;
    z-index: 999;
    background: $lightGrey;
    width: 98%;
    // height: 70px;
    padding: 10px 15px;
    font-size: 28px;
    opacity: .9;
    input{
        flex: 2;
        margin-right: 10px;
        font-size: 18px;
        letter-spacing: 1.3px;
        border: 1px solid grey;
        padding: 5px 10px;
    }
}

Answer 1

From Sass blog：

除了命名空间外，@ use和@import之间还有一些重要的区别：

@ use只执行一个样式表，并且一次包含它的CSS，无论该样式表使用了多少次。

@@ use仅使名称在当前样式表中可用，而不是全局。

名称以-或_开头的成员通过@use对当前样式表是私有的。

如果样式表包含@extend，则该扩展名仅应用于它导入的样式表，而不应用于导入它的样式表。

与@import不同，您需要使用@use规则将变量加载到需要它们的每个文件中。根据您的情况，您需要在使用这些变量的每个文件的顶部添加@use './Variables/_variables.scss';。