使用node-sass编译SCSS时出现未定义的变量错误

Question

的package.json

"scripts": {
  "compile:sass": "node-sass sass/main.scss css/style.css -w"
}

main.scss

@import "abstracts/variables";
@import "base/typography";  

_variables.scss

$color-light-grey: #777;
$color-white: #fff;   

_typography.scss

body {
  color: $color-light-grey;
}
.heading-primary {
  color: $color-white;
}

现在我的问题是当我尝试使用npm run compile:sass它编译时抛出以下错误:

"message":"未定义的变量:\"$ color-light-grey \"."

Answer 1

将所有以“_”开头的文件名转换为
：
typography.scss >> to >> _typography.scss

Answer 2

看起来上面的代码中有两个错误：

• 您导入"abstracts/variables"，但至少在文本中，文件名似乎是_variables.scss（缺少“s”）
• 您应该"abstracts/variables"先导入。

像那样：

@import "abstracts/variables";
@import "base/typography";