将 ng serve 用于 Sass 和 Angular 时出现未定义变量错误

Question

下午好， 我完全不知所措。我正在尝试将变量从名为 _variables.scss 的主变量文件导入到我的组件 .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 Sass 和 Node Sass 中都可用。