SCSS使用Gulp时未定义变量错误

Question

我正在使用gulp-sass编译SCSS，但收到以下错误消息:

[19:51:38] 'sassTask' errored after 98 ms
[19:51:38] Error in plugin 'gulp-sass'   
Message:
assetsscssbase_typography.scss    
Error: Undefined variable: "$color-grey-dark".
on line 6 of assets/scss/base/_typography.scss
from line 7 of assets/scss/main.scss
>>     color: $color-grey-dark;

这些是我的变量从scss/abstracts/_variables.scss

$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;

我在scss/base/_typography中使用了$color-grey-dark。生成错误消息的SCSS:

body {
font-family: "Lato", sans-serif;
font-weight: 400;
/* font-size: 16px; */
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
box-sizing: border-box;
}

这里是我的代码从assets/scss/main.scss:

@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "base/animations";
@import "base/base";
@import "base/typography";
@import "base/utilities";
@import "components/button";
@import "layout/header";
@import "pages/home";

我确实把变量放在列表的顶部，因为我读到导入的错误顺序可能会产生问题，但这并没有解决问题。

如何修复这个错误?这里有一个项目的repo链接，如果有帮助:https://github.com/chris-fretz/natours-project.

Answer 1

似乎是你的路径有问题…: -)

在github上你的项目@import文件_variables.scss从目录"abstracts/variables".

该目录下的文件为空!!

包含您想要加载的变量的文件_variables.scss直接放在assets中。所以你可以试试@import 'variables…或者只是将带有变量的文件移动到正确的位置。

---

另外一个很好的通知:在这种情况下，检查其他文件的路径也会很有帮助，即mixins, functions，…: -)