SASS не складається, коли одна частина використовує змінну, оголошену в іншому частковому файлі

У мене дуже маленька hello world Проект SCSS наступним чином:

index.html

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

sassmain.scss

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

sass / abstract / _variable.scss

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

sass / base / _typography.scss

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

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:Userssandgup3DesktopNodeBookadvanced-css-courseNatourstest
> node-sass ./sass/main.scss css/style1.css -w

Однак, якщо я коментую Рядок A в main.scss, SASS чудово працює з файлами

=> changed: C:Userssandgup3DesktopNodeBookadvanced-css-courseNatourstestsassmain.scss
Rendering Complete, saving .css file...
Wrote CSS to C:Userssandgup3DesktopNodeBookadvanced-css-courseNatourstestcssstyle1.css

Тепер, якщо я коментую Рядок A з main.scss Я отримую цю помилку:

{
"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.scssn>>   color: $color-red;n   ---------^n"
}

Крім того, якщо я безпосередньо імпортую _variables.scss в _typography.scss, SASS компілюється чудово.

Хтось може допомогти це налагодити? Я завантажив файл на GitHub для довідки:Посилання

Відповіді:

2 для відповіді № 1

Це дуже просто. Ви імпортуєте часткові дані в неправильному порядку. Спочатку імпортуйте змінні (завжди), а потім решту частин, які використовують змінні.

sassmain.scss

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

PS: Файл слід викликати variables (множина).

---