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

Question

package.json

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

ma​​in.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 >> 到 >> _typography.scss

Answer 2

您上面的代码中似乎有两个错误：

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

这样：

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