当使用ng服务于Sass和角时，获取未定义的变量错误

Question

下午好，我完全不知所措。我正在尝试从一个名为.scss的主变量文件中将变量导入到组件_variables.scss文件中。我使用@use方法，它说未定义定义的变量。variables.scss文件在我的src文件夹中。我尝试在@use语句中使用文件扩展名中的"“，尝试添加文件扩展名.scss

​

/* Variables.scss*/
$position: relative;
$position-ab: absolute;
$position-fix: fixed;

$background-color: #1a2d4e;
$color-white: white;
$bright-blue: #00a4b8;

$lora: 'Lora', serif;
$merriweather: 'Merriweather', serif;
$playfair: 'Playfair Display', serif;
$abril: 'Abril Fatface', cursive;

$z-index-10: 10;
$x-index: 1;

$zoom: 1;
$zoom-7: .7;
$zoom-8: .8;

$width: 100%;
$height: 100%;
$height-i: inherit;
$dp-inline: inline-block;
$dp-none: none;

/* about component.scss */

@use "../../variables";

/*ABOUT-----------------------*/
#about, .web-col, .wordpress, .web-row-contain,.consulting{
   height: $height-i;
    box-shadow: 0px 3px 2px 1px lightgrey;
    border-radius: 5px;
    background: #f8f8f8;
}

#about {
   position: $position;
    top: 440px;
    left: 5%;
    width: 40%;
    height: 500px;
    zoom: 1.1;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: $z-index;
    background: #F0F0F0;
}


h1 {
    font-family: $abril;
    padding-top: 10px;
}

#about-chevron {
   position: $position;
    bottom: 100px;
    left: 37%;
    width: 40%;
    height: 120px;
    z-index: $z-index;
}


.about-link {
   position: $position;
    top: -400%;
    left: 19.5%;
}  

.about-me-content {
   position: $position;
    left: 34%;
}
   #about-image {
   position: $position;
    top: 2%;
    left: 33%;
    zoom: .07;
}



.about-description {
   position: $position; 
    top: 9%;
    padding-left: 5%;
    line-height: 1.6;
    font-family: 'Peddana', serif;
    font-size: 16px;
    margin: 0px 5% 0px 5%;
   color: black;
}


.about-chev {
    padding-left: 45%;
}

​

Answer 1

您可以尝试使用@import "../../variables"而不是@use "../../variables"。

问题是，@use只适用于Dart Sass，而@include在Dart和Node Sass中都可用。