使用 Gulp

问题描述

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

[19:51:38] 'sasstask' errored after 98 ms
[19:51:38] Error in plugin 'gulp-sass'   
Message:
    assets\scss\base\_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.scss 中使用 $color-grey-dark 的地方，它生成了错误消息：

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";

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

我该如何解决这个错误？以下是项目存储库的链接，以防万一：https://github.com/chris-fretz/natours-project。

解决方法

您的路径似乎有问题... ;-)

在您在 github 上的项目中，您从目录 @import 获得 _variables.scss 文件 "abstracts/variables"。

那个目录下的文件是空的！！！

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

---

额外的注意事项：在这种情况下，检查其他文件的路径也可能会有所帮助，例如 mixins、函数等；-)