Title: SCSS Undefined variable error when using Gulp
Tags: css;sass;gulp;gulp-watch;gulp-sass
Question: I am using gulp-sass to compile SCSS, but received the following error message:
[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: &quot;$color-grey-dark&quot;.
on line 6 of assets/scss/base/_typography.scss
from line 7 of assets/scss/main.scss
&gt;&gt;     color: $color-grey-dark;
Here are my variables from 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;
Here's where I used the $color-grey-dark in scss/base/_typography.scss which generated the error message:
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;
and here is my code from 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";
I did put variables at the top of the list, since I read that the wrong order of your imports can create problems, but that didn't fix it.
How can I fix this error? Here is a link to the repo of the project in case that's helpful: https://github.com/chris-fretz/natours-project.
Comment: Try with npm rebuild. Sometimes, rebuild helps in refreshing the build. If still didn't work fine then please share some running code example will surely try have a deeper look into it.

Here is the accepted answer: Seems to be a problem with your pathes ... ;-)
In your project on github you @import file _variables.scss from directory &quot;abstracts/variables&quot;.
The file in that directory is empty!!!
The file _variables.scss with the variables you want to load is placed in assets directly. So you may try @import 'variables ... or just move the file with the variables to the right place.
Additional nice notice: in that situation it could be helpful to check the pathes for other files as well i.e. mixins, functions, ... ;-)
Comment for this answer: Yes, that was it! Thank you, I'll be checking my paths more carefully from now on.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:03/05/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><sass><gulp><gulp-watch><gulp-sass>', 'Title': 'SCSS Undefined variable error when using Gulp', 'ViewCount': 1609, 'id': 66485715, 'user_AboutMe': '', 'user_AccountId': 20873057.0, 'user_DisplayName': 'Chris Fretz', 'user_Reputation': 3.0, 'user_Views': 2.0, 'user_id': 15332534.0}}