SASS不'；当一个分部使用另一个分部中声明的变量时，不能编译

我有一个非常小的

hello world

SCSS项目，如下所示：

index.html

<h1 class="heading-primary">Hello world!</h1>

sass/abstract/_variable.scss

@import "base/typography";    //Line A
@import "abstract/variable";

$color-white: #fff;
$color-black: #000;
$color-red: red;

.heading-primary {
  color: $color-red;
}

@import "abstract/variable";
@import "base/typography";

sass/base/_排版。scss

@import "base/typography";    //Line A
@import "abstract/variable";

$color-white: #fff;
$color-black: #000;
$color-red: red;

.heading-primary {
  color: $color-red;
}

@import "abstract/variable";
@import "base/typography";

package.json

{
  "name": "starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile":"node-sass ./sass/main.scss css/style1.css -w"
  },
  "author": "sandeep",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.7.2"
  }
}

现在，如果我运行

npm run compile

，SASS不会编译，只显示此消息

> starter@1.0.0 compile C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test
> node-sass ./sass/main.scss css/style1.css -w

然而，如果我在main.scss中注释行A，SASS在文件中工作得非常好

=> changed: C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\sass\main.scss
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\css\style1.css

现在，如果我从main.scss取消注释行A，我会得到以下错误：

{
  "status": 1,
  "file": "C:/Users/sandgup3/Desktop/NodeBook/advanced-css-course/Natours/test/sass/base/_typography.scss",
  "line": 3,
  "column": 10,
  "message": "Undefined variable: \"$color-red\".",
  "formatted": "Error: Undefined variable: \"$color-red\".\n        on line 3 of sass/base/_typography.scss\n>>   color: $color-red;\n   ---------^\n"
}

另外，如果我直接将\u variables.scss导入\u typography.scss，SASS编译得很好

有人能帮我调试一下吗？

---

我已将该文件上载到GitHub以供参考：

它非常简单。您正在以错误的顺序导入分部。首先（始终）导入变量，然后导入使用变量的其余部分

sass\main.scss

@import "base/typography";    //Line A
@import "abstract/variable";

$color-white: #fff;
$color-black: #000;
$color-red: red;

.heading-primary {
  color: $color-red;
}

@import "abstract/variable";
@import "base/typography";

---

注：该文件应称为变量（复数）。

非常简单。您正在以错误的顺序导入分部。首先（始终）导入变量，然后导入使用变量的其余部分

sass\main.scss

@import "base/typography";    //Line A
@import "abstract/variable";

$color-white: #fff;
$color-black: #000;
$color-red: red;

.heading-primary {
  color: $color-red;
}

@import "abstract/variable";
@import "base/typography";

PS：该文件应称为

变量

（复数）