使用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\"。"

- Ram Chandra Neupane

---

variable vs. variables? - pavel

Answer 1

将所有以"_"开头的文件名进行转换。
例如:
typography.scss >> 转换为 >> _typography.scss

- Dileep XDN

---

请确保您的回答对此问题中已有的答案进行了改进。 - hongsy

Answer 2

你的代码中似乎有两个错误：

• 你导入了"abstracts/variables"，但至少在文本中，文件名似乎是_variables.scss（缺少一个 "s"）。
• 你应该在所有其他内容之前导入"abstracts/variables"。

像这样：

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

- David Tanzer

---

它能工作，但我不知道为什么。有没有任何原因会造成差异？需要按优先级对文件进行排序吗？ - Ram Chandra Neupane

Answer 3

只需按照以下顺序导入所有内容

 - abstracts
 - vendors
 - base
 - layout
 - components
 - pages
 - themes

- 13reath