使用 Gulp 时出现 SCSS 未定义变量错误
SCSS Undefined variable error when using 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";
我确实将变量放在了列表的顶部,因为我读到错误的导入顺序会产生问题,但这并没有解决问题。
我该如何解决这个错误?如果有帮助,这里是项目回购的 link:https://github.com/chris-fretz/natours-project.
你的路径似乎有问题......;-)
在 github 上的项目中,您 @import
从目录 "abstracts/variables"
.
文件 _variables.scss
该目录中的文件为空!!!
你要加载的变量文件_variables.scss
直接放在assets
中。因此,您可以尝试 @import 'variables
... 或将包含变量的文件移动到正确的位置。
额外的注意事项:在这种情况下,检查其他文件的路径可能会有所帮助,例如 mixins、函数、... ;-)
我正在使用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";
我确实将变量放在了列表的顶部,因为我读到错误的导入顺序会产生问题,但这并没有解决问题。
我该如何解决这个错误?如果有帮助,这里是项目回购的 link:https://github.com/chris-fretz/natours-project.
你的路径似乎有问题......;-)
在 github 上的项目中,您 @import
从目录 "abstracts/variables"
.
_variables.scss
该目录中的文件为空!!!
你要加载的变量文件_variables.scss
直接放在assets
中。因此,您可以尝试 @import 'variables
... 或将包含变量的文件移动到正确的位置。
额外的注意事项:在这种情况下,检查其他文件的路径可能会有所帮助,例如 mixins、函数、... ;-)