Getting Undefined variable error when compiling SCSS using node-sass

Question

package.json

"scripts": {
  "compile:sass": "node-sass sass/main.scss css/style.css -w"
}

main.scss

@import "abstracts/variables";
@import "base/typography";

_variables.scss

$color-light-grey: #777;
$color-white: #fff;

_typography.scss

body {
  color: $color-light-grey;
}
.heading-primary {
  color: $color-white;
}

Now my issue is when I'm trying to compile with npm run compile:sass it throws the following error:

"message": "Undefined variable: \"$color-light-grey\"."

variable vs. variables?

pavel
– pavel

2017-11-27 08:53:08 +00:00
Commented Nov 27, 2017 at 8:53 — pavel
– pavel, Commented Nov 27, 2017 at 8:53

Dileep XDN · Accepted Answer · 2020-01-17 07:09:22Z

7

convert all file names with beginning "_"
example:
typography.scss >> to >> _typography.scss

answered Jan 17, 2020 at 7:09

Dileep XDN

1672 silver badges3 bronze badges

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

1 Comment

hongsy Over a year ago

Please ensure that your answer improves upon the answer already present in this question.

David Tanzer · Accepted Answer · 2017-11-27 08:58:23Z

3

Looks like there are two errors in your code above:

You import "abstracts/variables" but, at least in the text, the file name seems to be _variables.scss (missing an "s")
You should import "abstracts/variables" before everything else.

Like that:

@import "abstracts/variables";
@import "base/typography";

answered Nov 27, 2017 at 8:58

David Tanzer

2,74219 silver badges30 bronze badges

1 Comment

Ram Chandra Neupane Over a year ago

It works, but how I don't know. Is there any reason why that would make a difference? Is there needed to order file by priority?

13reath · Accepted Answer · 2023-01-29 15:03:46Z

0

Simply import everything in this order

 - abstracts
 - vendors
 - base
 - layout
 - components
 - pages
 - themes

answered Jan 29, 2023 at 15:03

13reath

32 bronze badges

Collectives™ on Stack Overflow

Getting Undefined variable error when compiling SCSS using node-sass

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related