SCSS Undefined variable error when using Gulp

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: "$color-grey-dark".
    on line 6 of assets/scss/base/_typography.scss
    from line 7 of assets/scss/main.scss
>>     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.

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. — Himanshu Saxena
– Himanshu Saxena, Commented Mar 5, 2021 at 6:36

Brebber · Accepted Answer · 2021-03-05 08:47:24Z

1

Seems to be a problem with your pathes ... ;-)

In your project on github you @import file _variables.scss from directory "abstracts/variables".

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, ... ;-)

answered Mar 5, 2021 at 8:47

Brebber

3,1142 gold badges12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Fretz Over a year ago

Yes, that was it! Thank you, I'll be checking my paths more carefully from now on.

Collectives™ on Stack Overflow

SCSS Undefined variable error when using Gulp

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related